.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

/* Grid Row */
.row {
  display: grid;
  gap: 16px; /* Space between grid items */
  grid-template-columns: repeat(12, 1fr);
}

/* Grid Columns */
.col {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

/* Column Sizes */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Responsive Example */
@media (max-width: 960px) {
  .row {
    grid-template-columns: repeat(3, 1fr);
  }
  .container {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .row {
    grid-template-columns: repeat(3, 1fr); 
  }
  .container {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .row {
    grid-template-columns: repeat(2, 1fr); 
  }
  .container {
    max-width: 90%;
  }
}