/*
 * Plan grid block (wpta/plan-grid): the plan tiles four across on laptops and bigger, two and two on tablets, and
 * one above another on phones, so no tile is left alone on a row. The tiles' own styles are in
 * components/plan-tile.css.
 */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}

@media (max-width: 1023px) {
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}