:root {
  --gap: 1rem;
}

.layout {
  display: grid;
  gap: var(--gap);
}

.layout-4 {
  grid-template-columns: repeat(4, 1fr);
}

.layout-2 {
  grid-template-columns: 1fr 1fr;
}

.layout-1-2 {
  grid-template-columns: 1fr 2fr;
}

.layout-2-1 {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 768px) {
  .layout-4,
  .layout-2,
  .layout-1-2,
  .layout-2-1 {
    grid-template-columns: 1fr;
  }
}

.center {
  margin: 0 auto;
}

.no-top-margin {
  margin-top: 0;
}