/*======= Services =======*/
.yankee-service-boxes {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-left: 2px solid $soft-gery;
    border-top: 2px solid $soft-gery;
    overflow: hidden;

    @include respond-above(md) {
        &.column-d-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    
        &.column-d-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    
        &.column-d-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @include respond-between(sm, md) {
        &.column-t-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    
        &.column-t-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    
        &.column-t-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @include respond-between(xs, sm) {
        &.column-s-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    
        &.column-s-3 {
            grid-template-columns: repeat(3, 1fr);
        }
    
        &.column-s-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @include respond-below(xs) {
        &.column-xs-2 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .service-box {
        padding: 45px 40px;
        border-right: 2px solid $soft-gery;
        border-bottom: 2px solid $soft-gery;
        
        .icon {
            font-size: 60px;
            color: $primary-color;
            margin-bottom: 35px;
            line-height: 1;
        }

        .title {
            font-size: 24px;
            text-transform: uppercase;
            line-height: 1;
            margin-bottom: 70px;

            @include respond-below(sm) {
                margin-bottom: 40px;
            }
        }

        .service-link {
            color: #d5d9da;
            font-size: 24px;
            line-height: 1;

            &:hover {
                color: $secondary-color;
            }
        }
    }
}