.feature {
    background-color: $primary-color;
    @include breakpoint(max-md) {
        padding-block: 80px;
    }
    &__area {
        @include breakpoint(md) {
            // transform: translateY(-80px);
        }
        .infotext {
            p {
                @extend %white-color;
            }
        }
    }
    &__item {
        padding: 40px 30px;
        background-color: $white-color;
        @include transition($transition);
        &:hover {
            @include transform(translateY(-10px));
            .feature {
                &__thumb {
                    span {
                        color: $theme-color;
                        -webkit-text-stroke-color: $theme-color;
                    }
                }
            }
        }
    }
    &__thumb {
        @extend %flex;
        @extend %justify-between;
        @extend %align-items-center;
        @extend %mb-25;
        span {
            @include font-size(48px);
            @extend %d-inline-block;
            @include transition($transition);
            color: $title-color;
            -webkit-text-fill-color: $white-color;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: $bg-color;
            font-weight: 900;
        }
    }
    &__content {
        h4 {
            @extend %text-1;
        }
        p {
            @extend %mb-0;
            @extend %text-3;
        }
    }
    &__two {
        background-color: transparent;
        .feature {
            &__item {
                background-color: transparent;
                @extend %text-center;
                border: 1px solid $bg-color;
                padding: 40px 25px;
                @include transition($transition);
                &:hover {
                    box-shadow: 0px 10px 10px rgba(136, 136, 136, 0.1);
                }
            }
            &__thumb {
                @extend %justify-center;
            }
        }
    }
    &__three {
        background-color: $bg-color;
        .col-12 {
            &:nth-child(1) {
                .feature__item {
                    background-color: $theme-color;
                }
                .feature__content {
                    h4, p {
                        @extend %white-color;
                    }
                }
            }
            &:nth-child(2) {
                .feature__item {
                    background-color: $primary-color;
                }
                .feature__content {
                    h4, p {
                        @extend %white-color;
                    }
                }
            }
            &:nth-child(3) {
                .feature__thumb {
                    background-color: $bg-color;
                }
            }
        }
        .feature {
            &__item {
                @extend %text-center;
                padding: 50px 25px;
                background-color: $white-color;
                @include transition($transition);
                &:hover {
                    box-shadow: 0px 10px 10px rgba(136, 136, 136, 0.1);
                }
            }
            &__thumb {
                @extend %justify-center;
                @extend %text-center;
                width: 100px;
                height: 100px;
                margin-inline: auto;
                background-color: $white-color;
                @include border-radius(100%);
            }
            &__content {
                h4 {
                    @extend %mb-10;
                }
            }
        }
        .infotext {
            p {
                @extend %desc-color;
            }
        }
    }
    &__four {
        background-color: $primary-color;
        @include breakpoint(max-xl) {
            padding-block: 90px;
        }
        .col-12 {
            &:last-child {
                .feature__item {
                    @include breakpoint(xl) {
                        border-right: none;
                    }
                }
            }
        }
        .feature {
            &__item {
                background-color: transparent;
                border: 1px solid rgba($white-color, $alpha: .1);
                padding: 30px 15px;
                @include breakpoint(xl) {
                    padding: 70px 30px;
                    border: none;
                    border-right: 1px solid rgba($white-color, $alpha: .1);
                }
            }
            &__inner {
                @extend %flex, %align-items-center, %justify-center, %text-center;
                @include breakpoint(sm) {
                    text-align: left;
                }
            }
            &__thumb {
                @extend %w-100, %justify-center;
                margin: 0 auto 20px;
                @include breakpoint(sm) {
                    width: 60px;
                    margin-bottom: 0;
                }
            }
            &__content {
                @extend %w-100;
                @include breakpoint(sm) {
                    width: calc(100% - 60px);
                    padding-left: 20px;
                }
                h5 {
                    @extend %white-color, %mb-0;
                    @include breakpoint(max-xl) {
                        font-size: 18px;
                        line-height: 1.5;
                    }
                }
            }
        }
    }
    &__innerpage {
        .feature {
            &__area {
                @include transform(translateY(0));
            }
        }
    }
}