.highlights-template {

.top-content,
.bottom-content {
        .wrapper .content {
                @include grid-column;
                text-align: center;
                font-size: rem-calc(18);
                @include breakpoint(tablet) {
                        @include grid-column(11);
                        @include grid-column-position(center);
                        font-size: rem-calc(20);
                }
                @include breakpoint(large) {
                        @include grid-column(10);
                        @include grid-column-position(center);
                }
        }
}
.top-content {
        margin-bottom: 1rem;
}
.highlight-boxes-wrapper{

}
.highlight-boxes {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        @include grid-layout(1, '.highlight', $grid-column-gutter);
        margin-bottom: map-get($grid-column-gutter, small)*0.8;
        .highlight {
                max-width: 100%;
        }
        @include breakpoint(tablet) {
                @include grid-layout(3, '.highlight', $grid-column-gutter);
                margin-bottom: map-get($grid-column-gutter, medium)*0.8;
                .highlight {
                        max-width: percentage(1/3);
                }
        }
        .highlight {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                margin-bottom: map-get($grid-column-gutter, small)*0.8;
                @include breakpoint(medium) {
                        margin-bottom: map-get($grid-column-gutter, medium)*0.8;
                }
                a {
                        background: $ace-blue;
                        &:hover, &:focus {
                                background: $ace-blue-h;
                        }
                }

                $highlight-colors: (
                        1: (
                                name: "lime",
                                color: $ace-lime,
                                hover: $ace-lime-h
                        ),
                        2: (
                                name: "blue",
                                color: $ace-blue,
                                hover: $ace-blue-h
                        ),
                        3: (
                                name: "orange",
                                color: $ace-orange,
                                hover: $ace-orange-h
                        ),
                        4: (
                                name: "pink",
                                color: $ace-pink,
                                hover: $ace-pink-h
                        ),
                        5: (
                                name: "gold",
                                color: $ace-gold,
                                hover: $ace-gold-h
                        ),
                        6: (
                                name: "teal",
                                color: $ace-teal,
                                hover: $ace-teal-h
                        )
                );

                @each $i, $c-g in $highlight-colors {

                        $n: map-get($c-g, name);
                        $c: map-get($c-g, color);
                        $c-h: map-get($c-g, hover);

                        &.highlight-default:nth-of-type(6n + #{$i}) a {
                                background: $c;
                                &:hover, &:focus {
                                        background: $c-h;
                                }
                        }

                        &.highlight-#{$n} a {
                                background: $c;
                                &:hover, &:focus {
                                        background: $c-h;
                                }
                        }
                }
        }
        a {
                display: flex;
                flex: 1 0 auto;
                flex-direction: column;
                position: relative;
                text-align: center;
                border-radius: 16px;
                color: $white;
                padding: rem-calc(24 24 32);
                @include breakpoint(tablet) {
                        padding: rem-calc(30 30 40);
                }
                h2 {
                        display: flex;
                        flex-direction: column;
                        align-content: center;
                        justify-content: center;
                        flex: 1 0 auto;
                        font-size: rem-calc(24);
                        font-weight: 300;
                        margin: 0;
                        line-height: 1.05;
                        color: $white;
                        @include breakpoint(tablet) {
                                font-size: rem-calc(30);
                        }
                }
                &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        right: 0;
                        bottom: 8px;
                        left: 0;
                        height: 20px;
                        width: 20px;
                        margin: auto;
                        background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2020%2020%22%20height%3D%2220%22%20width%3D%2220%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%23fff%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.39px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.63%22%20y%3D%224.47%22%20width%3D%2218.75%22%20height%3D%2211.07%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3Edown-chevron%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%222.32%206.16%2010%2013.84%2017.68%206.16%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                        background-position: center center;
                        background-repeat: no-repeat;
                        @include breakpoint(tablet) {
                                bottom: 12px;
                        }
                }
        }
}

}