.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* Adjust spacing as needed */
}

.grid-container.align-items-start {
  align-items: start;
}

.grid-item,
.grid-container > * {
  grid-column: span 12;
}

/* Responsive widths */
@media (min-width: 600px) { /* Adjust as needed */
  .grid-item.col-1,
  .grid-item[data-col="1"] { grid-column: span 1; }
  .grid-item.col-2,
  .grid-item[data-col="2"] { grid-column: span 2; }
  .grid-item.col-3,
  .grid-item[data-col="3"]  { grid-column: span 3; }
  .grid-item.col-4,
  .grid-item[data-col="4"]  { grid-column: span 4; }
  .grid-item.col-5,
  .grid-item[data-col="5"] { grid-column: span 5; }
  .grid-item.col-6,
  .grid-item[data-col="6"] { grid-column: span 6; }
  .grid-item.col-7,
  .grid-item[data-col="7"] { grid-column: span 7; }
  .grid-item.col-8,
  .grid-item[data-col="8"] { grid-column: span 8; }
  .grid-item.col-9,
  .grid-item[data-col="9"] { grid-column: span 9; }
  .grid-item.col-10,
  .grid-item[data-col="10"] { grid-column: span 10; }
  .grid-item.col-11,
  .grid-item[data-col="11"] { grid-column: span 11; }
  .grid-item.col-12,
  .grid-item[data-col="12"] { grid-column: span 12; }
}