CSS Grid Pricing Table Layout Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.pricing {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
  grid-template-areas:
    "pro"
    "starter"
    "team";
}

.pricing > .pro { grid-area: pro; }
.pricing > .starter { grid-area: starter; }
.pricing > .team { grid-area: team; }

@media (min-width: 820px) {
  .pricing {
    grid-template-columns: 1fr 1.15fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
    grid-template-areas:
      "starter pro team";
  }
}