/*
 * Video section - Figma 1:1276 (desktop) / 1:1479 (mobile).
 *
 * 1376 x 774 inset in a 1440 at desktop, and a genuinely different shape at
 * 375 - 337 tall, not the desktop box scaled - so the aspect ratio changes at
 * the breakpoint rather than the height being interpolated.
 */

.video-section {
    padding: var(--spacing-large) var(--spacing-small);
}

/*
 * Guest Services 1:4458 only. The type is `.section-heading` - Lyon 48/1.1, the
 * same scale the other section headings use - so only what is particular to this
 * one is set here: centred over the band, and held to about half the frame so it
 * breaks into the three lines it is drawn with rather than one wide line.
 */
.video-section-title {
    text-align: center;
    text-wrap: balance;
    max-width: 660px;
    margin: 0 auto var(--spacing-med);
}

.video-section-media {
    /* 1376 x 774. */
    aspect-ratio: 1376 / 774;
    overflow: hidden;
}

.video-section-video,
.video-section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .video-section {
        padding: var(--spacing-med) 16px;
    }

    .video-section-title {
        /* 1:1694 is its own node on mobile, directly above the picture. */
        margin-bottom: var(--spacing-small);
    }

    .video-section-media {
        /* 343 x 337 in the mobile frame - close to square, not the wide desktop box. */
        aspect-ratio: 343 / 337;
    }
}