@use "../mixins" as *;
@use "../media" as *;

.features {
    padding-bottom: var(--section-padding-y);
    overflow-x: hidden;

    &__inner {
        @include flex-center(space-between);

        @include desktop-wide {
            justify-content: space-around;
        }

        @include tablet {
            flex-direction: column;
        }

        @include mobile-s {
            background-color: var(--color-light-accent);
            border-radius: var(--border-radius-30);
        }
    }

    &__content {
        max-width: 445px;

        @include desktop-wide {
            margin-right: 5em;
            width: 100%;
        }

        @include tablet {
            margin-top: 5em;
            margin-bottom: 3em;
            margin-right: initial;
            max-width: 740px;
        }

        @include mobile {
            max-width: 500px;
        }

        &-description {
            margin-top: 1.5em;
            color: var(--color-dark-80);
            transition: color var(--transition-duration-03);
        }

        ul {
            margin-top: 20px;
        }
    }

    &__cards {
        margin-left: auto;
        padding-block: 80px;
        display: grid;
        grid-template-columns: 460fr 517fr;
        gap: 4em 2em;
        max-width: 1020px;
        position: relative;

        @include desktop-wide {
            grid-template-columns: repeat(1, 1fr);
            max-width: 740px;
            margin-left: 0;
            gap: 3em;
        }

        @include mobile {
            max-width: 500px;
            padding-block: 50px;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: -10000px;
            height: 100%;
            left: -10%;
            background-color: var(--color-light-accent);
            z-index: 1;
            border-radius: var(--border-radius-50);

            @include mobile-s {
                display: none
            }
        }
    }

    &__card {
        z-index: 2;

        &-header {
            @include flex-center(flex-start);
            column-gap: 20px;
        }

        &-description {
            margin-top: 20px;

            @include desktop-wide {
                margin-top: 0.6em;
            }
        }
    }

}