/* Content-count driven product gallery rhythm. Kept separate from each catalogue's visual skin. */
@media (min-width: 801px) {
  .catalog-auto-grid.catalog-count-1 {
    grid-template-columns: minmax(0, 360px);
    justify-content: start;
  }

  .catalog-auto-grid.catalog-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-auto-grid.catalog-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-auto-grid.catalog-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .catalog-auto-grid.catalog-count-1 > .sealing-product-card,
  .catalog-auto-grid.catalog-count-2 > .sealing-product-card,
  .catalog-auto-grid.catalog-count-3 > .sealing-product-card,
  .catalog-auto-grid.catalog-count-4 > .sealing-product-card { grid-column: auto; }

  .catalog-auto-grid.catalog-count-many {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .catalog-auto-grid.catalog-count-many > .sealing-product-card,
  .catalog-auto-grid.catalog-count-many > .bearing-product-card,
  .catalog-auto-grid.catalog-count-many > .other-product-card { grid-column: span 2; }

  /* When the count leaves one item on its own, the final four become two balanced rows. */
  .catalog-auto-grid.catalog-rebalance-four > .sealing-product-card:nth-last-child(-n + 4),
  .catalog-auto-grid.catalog-rebalance-four > .bearing-product-card:nth-last-child(-n + 4),
  .catalog-auto-grid.catalog-rebalance-four > .other-product-card:nth-last-child(-n + 4),
  .catalog-auto-grid.catalog-tail-two > .sealing-product-card:nth-last-child(-n + 2),
  .catalog-auto-grid.catalog-tail-two > .bearing-product-card:nth-last-child(-n + 2),
  .catalog-auto-grid.catalog-tail-two > .other-product-card:nth-last-child(-n + 2) { grid-column: span 3; }

  /* Other graphite products follow the same count logic instead of using a special first row. */
  .catalog-auto-grid .other-product-card:nth-child(n) { grid-column: auto; }
  .catalog-auto-grid.catalog-count-many .other-product-card:nth-child(n) { grid-column: span 2; }
  .catalog-auto-grid.catalog-rebalance-four .other-product-card:nth-last-child(-n + 4),
  .catalog-auto-grid.catalog-tail-two .other-product-card:nth-last-child(-n + 2) { grid-column: span 3; }
  .catalog-auto-grid .other-product-image,
  .catalog-auto-grid .other-product-card:nth-child(1) .other-product-image,
  .catalog-auto-grid .other-product-card:nth-child(2) .other-product-image { aspect-ratio: 1.3; }
}

@media (max-width: 800px) {
  .catalog-auto-grid > article,
  .catalog-auto-grid .other-product-card:nth-child(n) { grid-column: auto; }
}