/* Contact page: mobile-specific hero image layout.
   Loaded after the existing desktop/mobile Contact styles.
   Desktop hero image dimensions are left unchanged. */

@media (max-width: 1023px) {
    /* The old min-heights left a large empty area after the image. */
    .contact-page .contact-hero,
    .contact-page .contact-hero__inner {
        min-height: 0;
    }

    .contact-page .contact-hero {
        padding-bottom: 32px;
    }

    .contact-page .contact-hero__inner {
        padding-bottom: 0;
    }

    .contact-page .contact-hero-image {
        width: 100%;
        max-width: 560px;
        min-width: 0;
        margin: 32px auto 0;
    }

    .contact-page .contact-hero-image picture,
    .contact-page .contact-hero-image img {
        display: block;
    }

    .contact-page .contact-hero-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .contact-page .contact-hero-image {
        margin-top: 24px;
    }
}