/* Keep both hero photos visible instead of hiding the poker photo under the card. */
.btn.btn-primary,
a.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus-visible {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-text {
        max-width: 760px;
    }

    .hero-media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
        grid-template-rows: minmax(320px, 1fr) auto;
        gap: var(--space-4);
        align-items: stretch;
        min-width: 0;
    }

    .hero-main-image {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-height: 320px;
    }

    .hero-reservation-card {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 2;
        transform: none;
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
    }

    .hero-poker-image {
        position: static;
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        aspect-ratio: 16 / 9;
    }

    .hero-reservation-row-label,
    .hero-reservation-row-value {
        min-width: 0;
    }

    .hero-reservation-row-value {
        text-align: right;
    }
}

@media (max-width: 768px) {
    .hero-media {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .hero-main-image,
    .hero-poker-image,
    .hero-reservation-card {
        grid-column: 1;
        grid-row: auto;
    }

    .hero-main-image {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .hero-poker-image {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .hero-reservation-row {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}