@keyframes heroZoom {
    to {
        transform: scale(1);
    }
}

.ce-header-slide {
    font-size: 16px;
    position: relative;
    isolation: isolate;

    @media screen and (min-width: 768px) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        min-height: fit-content;
        height: 100vh;
        max-height: 1100px;
    }

    .ce-header-slide__media {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
        isolation: isolate;
        position: relative;
        overflow: hidden;

        @media screen and (min-width: 768px) {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            aspect-ratio: unset;
        }

        img {
            position: relative;
            z-index: 0;
            width: 100%;
            aspect-ratio: 16/9;
            object-fit: cover;
            min-height: 18em;
            transform: scale(1.06);
            animation: heroZoom 6s cubic-bezier(0.65, 0, 0.35, 1) forwards;

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

        &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 10;
            inset: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 100%);

            @media screen and (min-width: 768px) {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.25) 30%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.8) 100%);
            }
        }
    }

    .ce-header-slide__content {
        background-color: #1e1e1e;
        padding: 1.5em 1em;

        @media screen and (min-width: 768px) {
            position: relative;
            z-index: 10;
            background-color: unset;
            padding: 8em 4em 3em;
            max-width: 780px;
        }

        > * {
            transition: opacity 4s cubic-bezier(0.16, 1, 0.3, 1), transform 4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        > *:not(.visible) {
            opacity: 0 !important;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        > *:not(:last-child) {
            margin-block-end: 1.5em;
        }
    }
}