.layout--twocol {
  --gap: 4rem;
  --row-gap: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap) var(--gap);
}

.layout--twocol > .layout__region {
  flex: 0 1 100%;
}

@media screen and (min-width: 50em) {
  .layout--twocol {
    --row-gap: 0;
  }

  .layout--twocol > .layout__region--first,
  .layout--twocol > .layout__region--second {
    flex: 0 1 calc((100% - (var(--gap))) / 2);
  }
}