.grid {
  --columns: 12;
  --gutter: 1rem;
  display: block;
  margin-bottom: var(--space-base);
}

.column {
  padding: 0;
  margin-bottom: var(--space-base);
}

.column:last-child {
  margin-bottom: 0;
}

.layout__wrapper {
  padding: 0 var(--space-base) var(--space-base) var(--space-base);
}

@media screen and (min-width: 60rem) {
  .grid {
    display: grid;
    column-gap: var(--space-base);
    grid-template-columns: repeat(12, 1fr);
  }

  .grid > .column {
    grid-column: span var(--columns);
    margin-bottom: 0;
  }
}