/* Add a gap between layout regions. */
.layout--twocol {
  --dashboard-spacing: var(--gin-spacing-s);
  gap: var(--dashboard-spacing);
}

/* Use flexbox within each region. */
.layout--twocol .layout__region,
.layout--twocol .layout__region {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--dashboard-spacing);
}

/* Split first and second regions to two columns on large screens. */
@media (min-width: 48em) {
  .layout--twocol .layout__region--first,
  .layout--twocol .layout__region--second {
    flex-basis: 50%;
    max-width: calc(50% - var(--dashboard-spacing)*.5);
  }
}