:root {
    --shared-logo-top: calc(50vh - 295.5px);
    --shared-content-top: calc(50vh - 188.2352px);
    --shared-action-center-y: calc(50vh + 233px);
    --gallery-stage-top: calc(50vh - 307px);
    --gallery-image-row-offset: 80px;
}

/* Intro and gallery use the same viewport anchors without sharing visual styles. */
.main-content,
.carousel-wrapper {
    position: relative;
    justify-content: flex-start;
}

.main-content {
    transform: none;
}

.video-logo-box img {
    position: absolute;
    top: var(--shared-logo-top);
    left: 50%;
    inline-size: min(88.34px, 100%);
    margin-bottom: 0;
    transform: translateX(-50%);
}

.video-card {
    position: absolute;
    top: var(--shared-content-top);
    left: 50%;
    width: calc(100% - 40px);
    transform: translateX(-50%);
}

.skip-btn {
    position: absolute;
    top: var(--shared-action-center-y);
    left: 50%;
    margin-top: 0;
    transform: translate(-50%, -50%);
}

.carousel-container {
    position: absolute;
    top: calc(var(--gallery-stage-top) - var(--gallery-image-row-offset));
    left: 50%;
    transform: translateX(-50%);
}

.carousel-logo-overlay {
    top: calc(var(--shared-logo-top) - var(--gallery-stage-top));
    transform: translateX(-50%);
}

.image-container .action-btn {
    top: calc(var(--shared-action-center-y) - var(--gallery-stage-top));
    bottom: auto;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
    :root {
        --gallery-stage-top: 27.5vh;
        --gallery-image-row-offset: 43px;
        --shared-logo-top: calc(27.5vh + 7.5px);
        --shared-content-top: calc(50vh - 31.3613vw + 37.6336px);
        --shared-action-center-y: max(
            calc(72.5vh - 35px),
            calc(var(--shared-content-top) + 61.625vw + 18.35px)
        );
    }
}

@media (max-width: 480px) {
    :root {
        --gallery-stage-top: 30vh;
        --gallery-image-row-offset: 35px;
        --shared-logo-top: calc(30vh + 9.5px);
        --shared-content-top: calc(50vh - 31.3613vw + 28.2252px);
        --shared-action-center-y: max(
            calc(70vh - 28px),
            calc(var(--shared-content-top) + 61.625vw + 18.35px)
        );
    }
}