/* Fix for vertical infographic images stretching the blog post container on desktop */

/* Blog Style One - Fix image container */
.blog-style-one .single-blog-post .img-box {
    height: 250px; /* Fixed height for desktop */
    overflow: hidden;
}

.blog-style-one .single-blog-post .img-box > img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
    object-position: center; /* Center the image */
}

/* Blog Style Two - Fix image container */
.blog-style-two .single-blog-post-style-two .img-box {
    height: 350px; /* Fixed height for desktop */
    overflow: hidden;
}

.blog-style-two .single-blog-post-style-two .img-box > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Mobile responsive - Keep original behavior on mobile */
@media (max-width: 767px) {
    .blog-style-one .single-blog-post .img-box,
    .blog-style-two .single-blog-post-style-two .img-box {
        height: auto; /* Auto height on mobile */
    }
    
    .blog-style-one .single-blog-post .img-box > img,
    .blog-style-two .single-blog-post-style-two .img-box > img {
        height: auto; /* Auto height on mobile */
        object-fit: initial; /* Remove object-fit on mobile */
    }
}

/* Tablet responsive */
@media (min-width: 768px) and (max-width: 991px) {
    .blog-style-one .single-blog-post .img-box {
        height: 220px;
    }
    
    .blog-style-two .single-blog-post-style-two .img-box {
        height: 300px;
    }
}