/**
 * Blog Hero Styles
 *
 * Full-width featured image hero for single blog posts.
 *
 * @package WPBlogsAndPages
 * @since 1.0.0
 */

/* @critical-start context: blog */
/* ==========================================================================
   Blog Hero
   ========================================================================== */

.blog-hero {
    margin-bottom: var(--spacing-8);
}

.blog-hero-image {
    max-height: 500px;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.blog-hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 767px) {
    .blog-hero {
        margin-bottom: var(--spacing-4);
    }

    .blog-hero-image {
        max-height: 280px;
    }
}
/* @critical-end */