#overlay {z-index: 500;}

#overlay-text {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    row-gap: var(--size);
    flex-direction: column-reverse;
    justify-content: space-between;
    z-index: 10;
}

#overlay-logo {
    width: 100%;
    padding: var(--size) var(--size-m);
}

@media only screen and (min-width: 768px) {
    #overlay-text {
        top: 50dvh;
        right: unset;
        bottom: unset;
        left: 50vw;
        min-width: 100vw;
        max-width: 100vw;
        flex-direction: row;
        transform: translate(-50%, -50%);
        row-gap: var(--size);
        z-index: 10;
    }

    #overlay-logo {
        width: 12rem;
        padding: 0;
    }

    #overlay-headline {
        transform: translateY(6px);
    }
}

@media only screen and (min-width: 1096px) {
    #overlay-headline {
        left: 50%;
        transform: translate(-50%, 6px);
    }
}


#overlay-container {z-index: 5;}

.overlay-thumb-container {
    left: 50vw;
    /* centring is set in overlay_v4.js with GSAP xPercent/yPercent */
}

.overlay-thumb {
    width: 40vw;
    max-width: fit-content;
    max-height: 80dvh;
    opacity: .7;
    transform-origin: center;
}

@media only screen and (min-width: 768px) {
    .overlay-thumb-container {
        top: 50dvh;
        left: unset;
    }

    .overlay-thumb {
        width: 20vw;
        max-height: 40dvh;
    }
}