.card-product .product-img > picture {
  display: contents;
}

.tf-product-media-thumbs .item > picture,
.tf-product-media-main .item > picture,
.variant-picker-values .img > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.tf-product-media-main .item > picture {
  flex: 1 1 100%;
}

.box-nav-menu .list-recent-blog .img-box > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.box-nav-menu .list-recent-blog .img-box > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Reserve the four-column mobile thumbnail geometry before Swiper writes
   equivalent inline widths. This prevents the Product information column
   from jumping when the gallery initializes. */
@media (max-width: 767.98px) {
  .tf-product-media-thumbs .swiper-slide {
    width: calc((100% - 30px) / 4);
    flex: 0 0 calc((100% - 30px) / 4);
  }
}