.grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: start;
  max-width: var(--max-width-base);
}

.equalHeight {
  align-items: stretch;
}

.item {
  grid-column: span var(--span-base, 12);
  min-inline-size: 0;
}

.equalHeight .item {
  display: flex;
}

.equalHeight .item > * {
  flex: 1;
  min-inline-size: 0;
}

@media (min-width: 768px) {
  .grid {
    max-width: var(--max-width-md, var(--max-width-base));
  }

  .item {
    grid-column: span var(--span-md, var(--span-base, 12));
  }
}

@media (min-width: 1200px) {
  .grid {
    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
  }

  .item {
    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
  }
}