/**
 * Custom Image Aspect Ratios
 * 
 * This CSS ensures that product images maintain a 3:4 ratio
 * and post images maintain a 4:3 ratio.
 */

/* Product images - 3:4 ratio */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.product-image-link img,
.woocommerce div.product div.images img {
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Single product gallery thumbnails */
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-product-gallery__image img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

/* Post images - 4:3 ratio */
.post .post-thumbnail img,
.single-post-thumbnail img,
.wp-post-image:not(.woocommerce-product-gallery__image img) {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* Fix for Swiper galleries */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product thumbnails in Swiper */
.product-gallery-swiper .swiper-slide img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

/* Gallery thumbnails */
.gallery-thumbs-swiper .swiper-slide img {
    aspect-ratio: 3/4;
    object-fit: cover;
}