/* Match original website hero layout - exact dimensions from remote site */
/* Remote measurements: image 46.08%, title 75%, height 350px */

@media (min-width: 768px) {
    /* Container for hero section */
    .blog-hero .hero-blog-row {
        height: 350px !important;
        display: flex;
        justify-content: flex-end;
        position: relative;
    }

    /* Image wrapper - match remote: 525px width exactly */
    .blog-hero .hero-blog-row .blog-header-img {
        width: 525px !important;
        min-width: 525px !important;
        max-width: 525px !important;
        flex-shrink: 0 !important;
        flex-basis: 525px !important;
        height: 350px !important;
    }

    /* Image inside wrapper */
    .blog-hero .hero-blog-row .blog-header-img img {
        width: 100% !important;
        max-width: none !important;
        height: 350px !important;
        object-fit: cover !important;
        clip-path: polygon(100% 100%, 100% 0, 8% 0, 0% 100%) !important;
    }

    /* Title - match remote: 75% width */
    .blog-hero .hero-blog-title {
        width: 75% !important;
        clip-path: polygon(90% 100%, 95% 0%, -100% 0%, -100% 100%) !important;
    }

    .blog-hero .hero-blog-title h1 span {
        width: 90% !important;
        font-size: 36px !important;
        padding: 50px 20px 25px !important;
    }

    .blog-hero .hero-blog-title .artilce-info {
        padding-bottom: 50px;
        padding-left: 20px;
    }
}

@media (min-width: 992px) {
    /* Keep same proportions at larger screens - 525px matches remote */
    .blog-hero .hero-blog-row .blog-header-img {
        width: 525px !important;
        min-width: 525px !important;
        max-width: 525px !important;
        flex-basis: 525px !important;
    }

    .blog-hero .hero-blog-title {
        width: 75% !important;
    }

    .blog-hero .hero-blog-title h1 span {
        font-size: 39px !important;
        padding: 60px 20px 30px !important;
    }
}

/* Mobile - keep existing behavior */
@media (max-width: 767.98px) {
    .blog-hero .hero-blog-row {
        height: 350px !important;
    }
}