body {
  margin: 0;
}

div {
  background: #ffffff;
  min-height: 100px;
}

.t-primary {
  background-color: #ab222c;
}

.t-secondary {
  background-color: #ffc205;
}

.t-neutral {
  background-color: #aaaeb1;
}

@supports (grid-area: auto) {
  .grid {
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: 10fr 13fr 16fr 10fr 13fr 28fr 10fr;
    grid-template-rows: 1fr 1.6fr 1.2fr 1fr 0.5fr;
    background: #514142;
    height: 100vh;
  }
  .grid div {
    min-height: 0;
  }
  .grid .span-col-2 {
    grid-column-end: span 2;
  }
  .grid .span-col-3 {
    grid-column-end: span 3;
  }
  .grid .span-row-2 {
    grid-row-end: span 2;
  }
  .grid .span-row-3 {
    grid-row-end: span 3;
  }
}