/**
 * Section: Collection (two across)
 *
 * The whole band treatment lives in sections/collection.css, which this
 * section force-enqueues (see the render function). All that belongs here is
 * the two-column grid's own responsive behaviour.
 *
 * The base `.kit-grid.two { grid-template-columns: repeat(2, 1fr) }` is already
 * shared chrome in assets/css/components.css and is not repeated.
 *
 * Ported from .docs/mockup/css/shop.css line 182 and its responsive block
 * (401-405). components.css collapses every `.kit-grid` to a single column at
 * 980 for the homepage's three-up rows; the mockup's Shop by Space keeps the
 * kit pairs side by side all the way down to 640, so this restores that.
 * `.collection .kit-grid.two` is (0,3,0) and outranks the shared rule.
 */

@media (max-width: 980px) {
  .collection .kit-grid.two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .collection .kit-grid.two {
    grid-template-columns: 1fr;
  }
}