/* The plugin list (ProductListScreen.js): the hook centered over one grid of cards. The cards and
   the grid are styled in css/base.css, all but the grid's columns (below). */

.productListScreen {
  /* The top like the home hero, so the two hooks sit at the same height. The bottom is the room
     the cards' shadows need: glass stands off the page, and a shadow cut by the footer would not. */
  padding: 1rem 0 2rem;
}

.productListHook {
  text-align: center;
  margin-bottom: 5.5rem; /* room between the headline's wave and the cards */
}

/* A card is a third of the widest page, less the grid's two 1.75rem gaps (.productGrid) and a rem
   to spare, so a full row still holds three as the page widens, and fewer cards center under the
   hook instead of leaving empty columns on their right; a phone takes one, full width. */
.productListGrid {
  grid-template-columns: repeat(auto-fit, minmax(0, calc((var(--max) - 4.5rem) / 3)));
  justify-content: center;
}

/* On a phone on its side two cards of the full width are each taller than the screen, so three
   narrower ones share the row and a card's artwork stays inside it (css.md "Values"). */
@media (max-height: 30rem) {
  .productListGrid {
    grid-template-columns: repeat(auto-fit, minmax(0, 15rem));
  }
}