.box-with-cards {
    background-color: $primary;


    // .box-with-cards__container

    &__container {
        max-width: 192rem;
        overflow: hidden;
    }

    // .box-with-cards__content

    &__content {
        margin-inline: -2rem;
    }

    // .box-with-cards__head

    &__head {
        background-color: $light;
        position: relative;

        &::before {
            content: '';
            background-color: $light;
            width: 100vw;
            height: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    // .box-with-cards__head-text

    &__head-text {
        color: #D6D1BD;
        width: 100%;
        position: relative;
        background-color: $primary;
        padding: 2.5rem 2rem 5rem;

        &::before {
            content: '';
            background-color: $primary;
            width: 100vw;
            height: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        @media (min-width: $tabletSmallP1) {
            padding: 2.5rem 2rem 8rem;
        }

        h2 {
            @extend .h3;
            letter-spacing: -.5px;

            @media (min-width: $tabletSmallP1) {
                letter-spacing: -.7px;
            }
        }

        p {
            &:not(:first-child) {
                margin-top: 2.5rem;
                @media (min-width: $tabletSmallP1) {
                    margin-top: 2rem;
                }
            }
        }

        > * {
            max-width: 99.8rem;
            margin: 0 auto;
            text-align: center;
        }
    }

    // .box-with-card__illustration

    &__illustration {
        width: 100%;
        height: 100%;
        margin-bottom: -1px;
        padding-top: 2.7rem;
        @media (min-width: $tabletSmallP1) {
            margin-inline: -.3rem;
            width: calc(100% + .6rem);
        }

        img {
            width: 100%;
            height: auto;
            @media (max-width: $tabletSmall) {
                height: 22.1rem;
                object-fit: cover;
            }
        }
    }

    // .box-with-cards__cards

    &__cards {
    }

    // .box-with-cards__card

    &__card {
    }

    // .box-with-cards--white-bg
    &--white-bg {
        background-color: $white;
    }

    // .box-with-cards--light-bg
    &--light-bg {
        background-color: $light;
        margin-bottom: 0;
        padding-bottom: 10rem;

        @media(min-width: $tabletP1) {
            padding-bottom: 15rem;
        }

        & + .slider-articles {
            margin-top: 0;
        }

        &:has( + .slider-articles) {
            + .slider-articles {
                background-color: $light;
            }
        }
    }
}