.layout {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: var(--layout-column-gap);
  padding-left: var(--page-padding-sides);
  padding-right: var(--page-padding-sides);
}
.layout:first-of-type {
  margin-top: var(--page-padding-top);
}
.layout:last-of-type {
  margin-bottom: var(--page-padding-bottom);
}
.layout + .layout {
  margin-top: var(--layouts-gap);
}
.column {
  grid-column-end: span var(--span);
}
.column + .column {
}
.block {
  background-color: var(--block-background-color);
}
.block + .block {
  margin-top: var(--block-gap);
}


@media (max-width: 720px) {

  .layout {
    display: block;
  }
  .column + .column {
    margin-top: var(--block-gap);
  }

}