.grid {
  display: grid;
}

.grid--1 { grid-template-columns: var(--grid-columns-1); }
.grid--2 { grid-template-columns: var(--grid-columns-2); }
.grid--3 { grid-template-columns: var(--grid-columns-3); }
.grid--4 { grid-template-columns: var(--grid-columns-4); }

/* Ratios: desktop base */
.grid--2-1 { grid-template-columns: var(--grid-columns-2-1); }
.grid--1-2 { grid-template-columns: var(--grid-columns-1-2); }
.grid--3-1 { grid-template-columns: var(--grid-columns-3-1); }
.grid--1-3 { grid-template-columns: var(--grid-columns-1-3); }

/* Bricks: max-width 991px (l) */
@media (max-width: 991px) {
  .grid--l-1 { grid-template-columns: var(--grid-columns-1); }
  .grid--l-2 { grid-template-columns: var(--grid-columns-2); }
  .grid--l-3 { grid-template-columns: var(--grid-columns-3); }
  .grid--l-4 { grid-template-columns: var(--grid-columns-4); }

  .grid--l-2-1 { grid-template-columns: var(--grid-columns-2-1); }
  .grid--l-1-2 { grid-template-columns: var(--grid-columns-1-2); }
  .grid--l-3-1 { grid-template-columns: var(--grid-columns-3-1); }
  .grid--l-1-3 { grid-template-columns: var(--grid-columns-1-3); }
}

/* Bricks: max-width 767px (m) */
@media (max-width: 767px) {
  .grid--m-1 { grid-template-columns: var(--grid-columns-1); }
  .grid--m-2 { grid-template-columns: var(--grid-columns-2); }
  .grid--m-3 { grid-template-columns: var(--grid-columns-3); }
  .grid--m-4 { grid-template-columns: var(--grid-columns-4); }

  .grid--m-2-1 { grid-template-columns: var(--grid-columns-2-1); }
  .grid--m-1-2 { grid-template-columns: var(--grid-columns-1-2); }
  .grid--m-3-1 { grid-template-columns: var(--grid-columns-3-1); }
  .grid--m-1-3 { grid-template-columns: var(--grid-columns-1-3); }
}

/* Bricks: max-width 478px (s) */
@media (max-width: 478px) {
  .grid--s-1 { grid-template-columns: var(--grid-columns-1); }
  .grid--s-2 { grid-template-columns: var(--grid-columns-2); }
  .grid--s-3 { grid-template-columns: var(--grid-columns-3); }
  .grid--s-4 { grid-template-columns: var(--grid-columns-4); }

  .grid--s-2-1 { grid-template-columns: var(--grid-columns-2-1); }
  .grid--s-1-2 { grid-template-columns: var(--grid-columns-1-2); }
  .grid--s-3-1 { grid-template-columns: var(--grid-columns-3-1); }
  .grid--s-1-3 { grid-template-columns: var(--grid-columns-1-3); }
}