.grid-container {
  display: grid;
  grid-template-columns: 1fr; /* Single column by default */
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
  }
}

@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: 2fr 1fr; /* Example: wider main content, narrower sidebar */
  }
}