.slideshow:has(.ce-header-with-gradient) {
    overflow: visible;
}

.ce-header-with-gradient {
    font-size: 16px;
    position: relative;
    --color: #fafafa;

    @media screen and (min-width: 768px) {
        margin-block-end: -35dvh;
    }

    .ce-header-with-gradient__media {
        img {
            width: 100%;
            height: auto;
            aspect-ratio: 1;
            object-fit: cover;

            @media screen and (min-width: 768px) {
                aspect-ratio: unset;
                height: 100dvh;
            }
        }

        @media screen and (min-width: 768px) {
            &::after {
                content: "";
                display: block;
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(0, var(--color) 0%, rgb(from var(--color) r g b / 0) 50%);
            }
        }
    }

    .ce-header-with-gradient__body {
        width: 100%;

        @media screen and (min-width: 768px) {
            position: absolute;
            z-index: 1;
            bottom: 35dvh;
            left: 0;
        }
    }

    .ce-header-with-gradient__container {
        padding-block: 1.5em;
        padding-inline: 2.5em;

        @media screen and (min-width: 768px) {
            padding-inline: 1em;
        }
    }

    .ce-header-with-gradient__content {
        max-width: 57em;

        @media screen and (min-width: 768px) {
            color: white;

            * {
                color: white;
            }
        }
    }

    .ce-header-with-gradient__buttons {
        .ce-button:first-child:last-child {
            width: 100%;

            @media screen and (min-width: 768px) {
                width: auto;
            }
        }
    }
}