.grid {
  display: flex;
  flex-direction: column;
  gap: var(--size-8);
  margin-inline: auto;
  max-width: var(--size-37);
  padding-inline: var(--size-8);
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (width >= 60rem) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(12, 1fr);
  }

  .column {
    grid-column: span var(--span);
  }

  .column:first-child .block-type-heading,
  .column:first-child .block-type-text,
  .column:first-child .block-type-call-to-action {
    padding-inline-end: var(--size-25);
  }

  .column:last-child .block-type-heading,
  .column:last-child .block-type-text,
  .column:last-child .block-type-call-to-action {
    padding-inline-start: var(--size-25);
  }
  .column:only-child .block-type-heading,
  .column:only-child .block-type-text,
  .column:only-child .block-type-call-to-action {
    padding-inline: 0;
  }
}