/* Global Responsive Image Rule */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Main Banner - Ratio Wrapper (2:1 or similar) */
/* Targeted by ID to override Tailwind aspect util if needed, 
   but ideally should be used in conjunction */

/* If we strictly follow the padding-top trick instructions: */
#home-main-banner {
    display: block;
    position: relative;
    width: 100%;
    /* aspect-ratio handles this better in modern CSS, but using padding-top as requested: */
    /* padding-top: 50%; -- this conflicts with existing HTML classes if not handled carefully. 
       The user wants: wrapper relative, padding-top ratio. img absolute.
    */
}

/* Ensure images inside specific wrappers are absolute if using padding-trick */
.ratio-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

.ratio-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Specific aspect ratios */
.ratio-2-1 { padding-top: 50%; }
.ratio-16-9 { padding-top: 56.25%; }
.ratio-4-2 { padding-top: 50%; } /* Same as 2:1 */

/* Product Cards (re-iterated if needed globally) */
.product-card img:not(.product-card__image) {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .product-card img:not(.product-card__image) {
        height: 160px;
    }
}