.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap, 24px);
}

.grid12 > [data-col="1"] {
  grid-column: span 1;
}

.grid12 > [data-col="2"] {
  grid-column: span 2;
}

.grid12 > [data-col="3"] {
  grid-column: span 3;
}

.grid12 > [data-col="4"] {
  grid-column: span 4;
}

.grid12 > [data-col="5"] {
  grid-column: span 5;
}

.grid12 > [data-col="6"] {
  grid-column: span 6;
}

.grid12 > [data-col="7"] {
  grid-column: span 7;
}

.grid12 > [data-col="8"] {
  grid-column: span 8;
}

.grid12 > [data-col="9"] {
  grid-column: span 9;
}

.grid12 > [data-col="10"] {
  grid-column: span 10;
}

.grid12 > [data-col="11"] {
  grid-column: span 11;
}

.grid12 > [data-col="12"] {
  grid-column: span 12;
}

@media (max-width: 990px) {
  .grid12 > [data-col] {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .grid12 > * {
    min-width: 0;
  }
}