.slides > .section.header {
    --bgColor: var(--color-base-dark);
    --fgColor: #fff;
    --borderColor: hsl(from var(--color-base) h s 94);

    --hue: var(--color-base-hue);
    --saturation: var(--color-base-saturation);
    --bezel-width: 20px;
    --bezel-width-small-screen: 10px;

    --padding: var(--gap-huge);

    &.light {
        --bgColor: var(--color-background);
        --fgColor: var(--color-base);
        --borderColor: hsl(from var(--color-base) h s 92);
    }

    &.productRecommendations { --bgColor: var(--gradient-product-recommendations); --fgColor: var(--color-product-recommendations-fg); }
    &.naturalSearch { --bgColor: var(--gradient-natural-search); --fgColor: var(--color-natural-search-fg); }
    &.trendAnalysis { --bgColor: var(--gradient-trend-analysis); --fgColor: var(--color-trend-analysis-fg); }
    &.clientTags { --bgColor: var(--gradient-client-tags); --fgColor: var(--color-client-tags-fg); }

    @media all and (max-width: 800px) {
        --padding: var(--gap-bigger);
    }

    @media all and (max-width: 400px) {
        --padding: var(--gap-big);
    }

    padding-top: 0 !important;

    & > .wrapper {
        padding-top: 0 !important;

        overflow: hidden;

        border-bottom-left-radius: var(--border-radius-bezel-outer);
        border-bottom-right-radius: var(--border-radius-bezel-outer);

        box-shadow: 0 7px 15px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 15%);

        border-left: solid var(--borderColor) 1px;
        border-right: solid var(--borderColor) 1px;
        border-bottom: solid var(--borderColor) 1px;
    }

    &.bezel {
        & > .wrapper {

            padding: var(--bezel-width);

            @media all and (max-width: 400px) {
                padding: var(--bezel-width-small-screen);
            }

            background: hsl(var(--hue) var(--saturation) 60% / var(--bezel-transparency-onlight));
            backdrop-filter: blur(var(--bezel-frosting-blur));
        }
    }

    & > .wrapper > .innerWrapper {

        border-bottom-left-radius: var(--border-radius-bezel-inner);
        border-bottom-right-radius: var(--border-radius-bezel-inner);
        overflow: hidden;
        background: var(--bgColor);

        color: var(--fgColor);

        padding: calc(var(--padding) * var(--vertical-multiplier)) var(--padding);

        box-sizing: border-box;

        transition:
            opacity 500ms ease-in-out,
            transform 500ms ease-in-out;

        display: flex;
        align-items: center;
        gap: var(--gap-huge);

        & > .texts {
            flex-basis: 50%;

            display: flex;
            flex-direction: column;
            gap: var(--base-gap);

            & > .title {
                font-family: var(--font-family-title);
                font-size: clamp(20pt, 5vw, 35pt);
                letter-spacing: -.05em;
                font-weight: 600;
                line-height: .9em;
            }

            & > .subTitle {
                font-family: var(--font-family-title);
                font-size: clamp(13pt, 2vw, 17pt);
                letter-spacing: -.05em;
                font-weight: 400;
                line-height: 1.1em;
            }
        }

        & > .IconMosaic {
            flex-shrink: 1;
        }

        @media all and (max-width: 700px) {
            & > .texts {
                flex-basis: 100%;
            }

            & > .IconMosaic {
                display: none;
            }
        }
    }
}


body:has(.MenuBar.absolute) .section.header:first-of-type > .wrapper > .innerWrapper {
    padding-top: calc(var(--padding) * .5 + var(--menu-height));
}