/* Keep three bins above two centered accessories, with equal card widths. */
.products--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.products--3 > .product { min-width: 0; grid-column: span 2; }
.products--3 > .product--bag { grid-column: 2 / span 2; }
.products--3 > .product--lid { grid-column: 4 / span 2; }
.product--bag, .product--lid { scroll-margin-top: calc(var(--nav-h) + 24px); }
.product--bag .product-media, .product--lid .product-media { background: #fff; }
.product--bag .product-media img, .product--lid .product-media img { object-fit: contain; }
/* Match the actual product edge inside each white-background source image.
   Bag: x = 65 / 800; lid: x = 133 / 1000. Keep these in sync with the images. */
.product--bag { --product-content-inset: 8.125%; }
.product--lid { --product-content-inset: 13.3%; }
:is(.product--bag, .product--lid) > :is(h2, p, .product-actions) {
  margin-inline-start: var(--product-content-inset);
}
/* Preserve the image-to-copy alignment while hovering the accessory card. */
:is(.product--bag, .product--lid):hover .product-media img { transform: none; }
@media (max-width: 760px) {
  .products--3 { grid-template-columns: 1fr; }
  .products--3 > .product { grid-column: 1; }
}