.l-layout {
  background-color: var(--columns-background-color);
}

.l-layout__main {
  --l-main-columns: 1;
  display: grid;
  grid-template-columns: repeat(var(--l-main-columns), minmax(0, 1fr));
}
@media (min-width: 768px) {
  .l-layout__main.l-layout--layout-twocolumn-halves {
    --l-main-columns: 2;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-threecolumn-thirds, .l-layout__main.l-layout--layout-threecolumn-half-quarter-quarter, .l-layout__main.l-layout--layout-threecolumn-quarter-half-quarter, .l-layout__main.l-layout--layout-threecolumn-quarter-quarter-half {
    --l-main-columns: 3;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-threecolumn-half-quarter-quarter {
    grid-template-columns: 50% 25% 25%;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-threecolumn-quarter-half-quarter {
    grid-template-columns: 25% 50% 25%;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-threecolumn-quarter-quarter-half {
    grid-template-columns: 25% 25% 50%;
  }
}
@media (min-width: 992px) {
  .l-layout__main.l-layout--layout-fourcolumn {
    --l-main-columns: 2;
  }
}
@media (min-width: 1440px) {
  .l-layout__main.l-layout--layout-fourcolumn {
    --l-main-columns: 4;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-twocolumn-onethird-twothirds {
    grid-template-columns: 33% 67%;
  }
}
@media (min-width: 1200px) {
  .l-layout__main.l-layout--layout-twocolumn-twothirds-onethird {
    grid-template-columns: 67% 33%;
  }
}