/*
  H-Code Theme Thumbnail Fix v6 (Final)
  Author: Roo
  Objective: Use a dedicated class to force all thumbnails to a 2:3 aspect ratio.
*/

/* 1. Target the dedicated container class */
.thumbnail-fix-container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding: 0 !important;
    padding-bottom: 150% !important; /* 2:3 Aspect Ratio */
    overflow: hidden !important;
    background-color: #f0f0f0 !important;
}

/* 2. Style the image within the container */
.thumbnail-fix-container img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: transform 0.3s ease !important;
}

/* 3. Hover effect */
.thumbnail-fix-container:hover img {
    transform: scale(1.1) !important;
}

/* 4. Exception for classic layout */
.blog-listing-classic .thumbnail-fix-container {
    padding-bottom: 75% !important; /* 4:3 ratio */
}