.header-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-wrapper > img {
    width: 85%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
}

.header-wrapper .signs-img {
    order: 1; 
}

.header-wrapper .logo-img { 
    order: 2; 
}

.header-wrapper .header-mobile-location-date { 
    order: 3; 
}

.header-wrapper .header-race-service { 
    display: none; 
}

.event-info-marquee {
    width: 100%;
    overflow: hidden;
}

.event-info-track {
    display: flex;
    width: max-content;
    height: 3vh;
    animation: marquee 40s linear infinite;
    align-items: center;
}

.event-info-track img {
    height: 70%;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 4vw;
}

@keyframes marquee {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.hero-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.hero-stack .landing-container {
    order: 1; 
}

.hero-stack .event-info-marquee { 
    order: 2; 
}

.map-section {
    position: relative;
    width: 100%;
}

.map-base-img {
    width: 100%;
    height: auto;
    display: block;
}

.location-date-overlay {
    display: none;
}

.slow-down-section {
    width: 100%;
}

.slow-down-img {
    width: 100%;
    height: auto;
    display: block;
}

.white-banner-section {
    position: relative;
    width: 100%;
}

.white-banner-base-img {
    width: 100%;
    height: auto;
    display: block;
}

.white-banner-overlay {
    display: none;
}

.landing-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 1;
    overflow: hidden;
}

.landing-img-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url('../../images/home/middle.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.8);
    transform-origin: 53% 50%;
}

.back-blue-img {
    width: 37%;
    aspect-ratio: 1 / 1;
    position: absolute;
    bottom: -35%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../../images/home/blue_back.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.buy-tickets-link {
    width: 17%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.buy-tickets-img {
    width: 100%;
    height: auto;
    display: block;
    padding-bottom: 5%;
    border-bottom: 2px solid #f4f3ec;
    /* Zoom grows downward (origin top); no shadow — it's an image. */
    transform-origin: top center;
    transition: transform .4s ease-out;
}

.buy-tickets-link:hover .buy-tickets-img {
    transform: scale(1.12);
}

.ticket-section {
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 2824 / 4679;
    background-image: url('../../images/home/mobile/back_separators.webp');
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

.ticket-card {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 18% 60% 22%;
    align-items: start;
    justify-items: center;
    padding: 5%;
    box-sizing: border-box;
}

.ticket-card-side   { 
    grid-column: 1; 
    grid-row: 1 / span 3; 
    width: 90%; 
}

.ticket-card-body   { 
    grid-column: 2; 
    grid-row: 1 / span 3; 
    width: 90%; 
}

.ticket-card-header { 
    grid-column: 3; 
    grid-row: 1; 
    width: 100%; 
}

.ticket-card-apply  { 
    grid-column: 3; 
    grid-row: 2; 
    width: 80%;
    display: block;
    position: relative;
    left: -11%;
    top: -30%;
    padding: 10%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1), 0px 5px 5px 0px rgba(0, 0, 0, 0.3)
}

.driver-apply {
    background-color: #dd9b2a;
}

.media-apply {
    background-color: #1f4386;
}

.guests-apply {
    background-color: #f5a0a2;
    width: 92.4%;
    left: -5%;
}

.ticket-card-dot    { 
    grid-column: 3; 
    grid-row: 3; 
    width: 55%; 
    position: relative;
    left: -20%;
    align-self: end;
}

.ticket-card-header img,
.ticket-card-body img {
    width: 100%;
    height: auto;
    display: block;
}

.ticket-card-apply img {
    width: 100%;
    height: auto;
    display: block;
    padding-bottom: 4%;
    border-bottom: 2px solid #f4f3ec;
}

.layer-4-container {
    display: none;
}

.video-wrapper {
    overflow: hidden;
}

.hero-video {
    display: block;
    width: 100%;
    height: auto;
    /* Decorative background video — block all clicks/taps so visitors can't
       pause it or interact with the YouTube player. */
    pointer-events: none;
}

@media (min-width: 577px) {
    .header-wrapper {
        display: grid;
        grid-template-columns: 60fr 40fr;
        grid-template-areas:
            "logo race-service"
            "logo signs";
        align-items: start;
        padding: 2vh 2vw;
        column-gap: 2vw;
    }

    .header-wrapper .logo-img {
        grid-area: logo;
        width: 100%;
        margin: 0;
    }

    .header-wrapper .header-race-service {
        display: block;
        grid-area: race-service;
        width: 90%;
        justify-self: center;
        margin: 0;
    }

    .header-wrapper .signs-img {
        grid-area: signs;
        width: 90%;
        justify-self: center;
        margin: 1% 0 0 0;
    }

    .header-wrapper .header-mobile-location-date {
        display: none;
    }

    .hero-stack .event-info-marquee { 
        order: 1; 
    }

    .hero-stack .landing-container { 
        order: 2; 
    }

    .location-date-overlay {
        display: block;
        position: absolute;
        left: 3%;
        bottom: 5%;
        width: 60%;
        height: auto;
    }

    .white-banner-overlay {
        display: block;
        position: absolute;
        top: 5%;
        left: 10%;
        width: 80%;
        height: auto;
    }

    .landing-container {
        width: 97%;
        height: 75vh;
        margin: 0 auto 5% auto;
        overflow: visible;
    }

    .video-wrapper {
        height: 100%;
    }

    .hero-video {
        height: 100%;
    }
    
    .landing-img-container {
        aspect-ratio: 3142 / 1400;
        height: auto;
        overflow: visible;
        transform: none;
    }

    .back-blue-img {
        width: 33%;
        bottom: -13vw;
    }

    .buy-tickets-link {
        width: 19%;
        bottom: 0%;
    }

    .buy-tickets-img {
        padding-bottom: 2%;
    }

    .ticket-section {
        aspect-ratio: 3148 / 1976;
        background-image: url('../../images/home/separator_lines.webp');
        background-position: top;
        padding: 7% 0%;
        box-sizing: border-box;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .ticket-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        align-items: start;
        justify-items: start;
        padding: 0 0 0 10%;
    }

    .ticket-card-header { 
        grid-column: 1; 
        grid-row: 1; 
        width: 90%; 
    }

    .ticket-card-apply  { 
        grid-column: 1; 
        grid-row: 2; 
        width: 25%; 
        margin: 1rem 0; 
        position: relative;
        top: 0%;
        left: 0%;
        padding: 3%;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1), 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
        transform: scale(1);
        transform-origin: 0%;
        transition: transform .5s ease-out, box-shadow .5s ease-out;
    }

    .ticket-card-apply:hover  { 
        transform: scale(1.3);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3), 0px 5px 5px 0px rgba(0, 0, 0, 0.5);
    }

    .ticket-card-body   { 
        grid-column: 1; 
        grid-row: 3; 
        width: 90%; 
    }

    .ticket-card--guests .ticket-card-apply { 
        width: 30.75%; 
    }

    .ticket-card-side,
    .ticket-card-dot {
        display: none;
    }

    .layer-4-container {
        display: block;
        width: 100%;
        aspect-ratio: 3072 / 957;
        background-image: url('../../images/home/block_2.webp');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}