.featured-section {
    .hero-item + .featured-list {
        margin-top: calc(var(--unit) * 3);

        @media screen and (min-width: 1420px) {
            margin-top: calc(var(--unit) * 6);
        }
    }

    .hero-item-content:is(.show-background-false) {
        @media screen and (min-width: 1000px) {
            color: white;
        }
    }

    .featured-list {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 var(--site-padding);
        margin: auto;
        gap: calc(var(--unit) * 3);
        overflow-x: visible;
        max-width: var(--max-width);

        @media screen and (min-width: 700px) {
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: stretch;
        }

        @media screen and (min-width: 1420px) {
            gap: calc(var(--unit) * 6);
        }

        > section {
            width: 100%;
            background-color: rgba(var(--text-color-rgba), 0.1);
        }
    }
}

.featured-section:is(.background-true) {
    background-color: rgba(var(--text-color-rgba), 0.1);

    .featured-list > section {
        background-color: var(--background-color);
    }
    
    .hero-item-content:not(.show-background-false) {
        background-color: var(--background-color);
    }
}

.featured-section:is(.background-true):not(:has(.productfooter)) {
    padding-bottom: calc(var(--unit) * 3);

    @media screen and (min-width: 1420px) {
        padding-bottom: calc(var(--unit) * 3);
    }
}

.featured-section:is(.background-true):not(:has(.pageheader-container)) {
    padding-top: calc(var(--unit) * 3);
    
    @media screen and (min-width: 1420px) {
        padding-top: calc(var(--unit) * 6);
    }
}