/* Shared styles */
.container { font-family: system-ui, sans-serif; padding: 2rem; }

/* Thumbnail: square */
.product-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

/* Hero: wide rectangle */
.hero-img {
  width: 100%;
  max-width: 600px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

/* NO FIX APPLIED - the transition pseudo-elements will stretch */