/*======= Iconic Boxes =======*/
.yankee-iconic-boxes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: flex-start;

    &.lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    &.lg-2 {
        grid-template-columns: repeat(2, 1fr);

        &.masonry-layout {
            .icon-box {
                &:nth-child(even) {
                    @include respond-above(md) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

    &.lg-3 {
        grid-template-columns: repeat(3, 1fr);

        &.masonry-layout {
            .icon-box {

                &:nth-child(2),
                &:nth-child(5),
                &:nth-child(8),
                &:nth-child(11),
                &:nth-child(14),
                &:nth-child(17),
                &:nth-child(20),
                &:nth-child(23),
                &:nth-child(26),
                &:nth-child(29),
                &:nth-child(32) {
                    @include respond-above(md) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

    &.lg-4 {
        grid-template-columns: repeat(4, 1fr);

        &.masonry-layout {
            .icon-box {
                &:nth-child(even) {
                    @include respond-above(md) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

    &.lg-5 {
        grid-template-columns: repeat(5, 1fr);

        &.masonry-layout {
            .icon-box {

                &:nth-child(2),
                &:nth-child(4),
                &:nth-child(7),
                &:nth-child(9),
                &:nth-child(12),
                &:nth-child(14),
                &:nth-child(17),
                &:nth-child(19),
                &:nth-child(22),
                &:nth-child(24),
                &:nth-child(27),
                &:nth-child(29),
                &:nth-child(32) {
                    @include respond-above(md) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

    &.lg-6 {
        grid-template-columns: repeat(6, 1fr);

        &.masonry-layout {
            .icon-box {
                &:nth-child(even) {
                    @include respond-above(md) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

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

        &.md-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        &.md-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        &.md-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        &.md-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        &.md-6 {
            grid-template-columns: repeat(6, 1fr);
        }
    }

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

        &.sm-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        &.sm-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        &.sm-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        &.sm-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        &.sm-6 {
            grid-template-columns: repeat(6, 1fr);
        }
    }

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

        &.xs-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        &.xs-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        &.xs-4 {
            grid-template-columns: repeat(4, 1fr);
        }

        &.xs-5 {
            grid-template-columns: repeat(5, 1fr);
        }

        &.xs-6 {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    .icon-box {
        background-color: $white;
        text-align: center;
        padding: 40px 25px;
        position: relative;
        z-index: 1;
        @include transition(0.3s);

        &::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: -2;
            background-color: $secondary-color;
            content: "";
            @include transition(0.3s);
            opacity: 0;
            visibility: hidden;
            border-bottom: 3px solid $primary-color;
        }

        .icon {
            line-height: 1;
            font-size: 60px;
            color: $primary-color;
            margin-bottom: 20px;
            @include transition(0.3s);
        }

        .title {
            font-size: 16px;
            text-transform: uppercase;
            @include transition(0.3s);
        }

        &:hover {
            &::before {
                width: 100%;
                opacity: 1;
                visibility: visible;
            }

            .title {
                color: $white;
            }
        }
    }
}