/* Photos fill their existing frame. Only transparent cutouts use contain. */
:is(.highlight-card__image, .weekly-image, .home-promotion__photo, .editor-preview, .manager-thumb) > img.product-cutout {
  object-fit: contain;
  object-position: center;
  padding: 8px;
  background: #eaf0df;
}
:is(.highlight-card__image, .weekly-image, .home-promotion__photo, .editor-preview, .manager-thumb) > img.product-frame {
  object-position: var(--product-x, 50%) var(--product-y, 50%);
  transform: scale(var(--product-scale, 1));
  transform-origin: var(--product-x, 50%) var(--product-y, 50%);
}
:is(.highlight-card__image, .weekly-image, .home-promotion__photo, .editor-preview, .manager-thumb) > img.product-frame.product-fit-contain {
  object-fit: contain;
  padding: 8px;
  background: #eaf0df;
}
:is(.highlight-card__image, .weekly-image, .home-promotion__photo, .editor-preview, .manager-thumb) > img.product-frame.product-fit-cover {
  object-fit: cover;
  padding: 0;
  background: transparent;
}
/* A tall package gets the height of the hero, with copy beside it. */
.home-promotion__photo > img:is(.product-cutout, .product-fit-contain) { padding: 54px 16px 18px 0; background: transparent; }
.manager-thumb > img.product-cutout { padding: 2px; }
@media (max-width: 760px) {
  .home-promotion__photo > img:is(.product-cutout, .product-fit-contain) { padding: 48px 8px 10px 0; }
}