/* Shared grid container */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* One-column layout */
.grid-1 > .box {
  flex: 1 1 calc(100% - 1rem);
  padding-top: 1rem;
}

/* Two-column layout */
.grid-2 > .box {
  flex: 1 1 calc(50% - 1rem);
}

/* Three-column layout */
.grid-3 > .box {
  flex: 1 1 calc(33.333% - 1rem);
}
/* Four-column layout */
.grid-4 > .box {
  flex: 1 1 calc(25% - 1rem);
}

/* Box styling */
.box {
  background: #111;
  padding: 1.5rem;
  border: 1px solid #333;
  border-radius: 4px;
  text-align: center;
}

/* Automatic stacking on small screens */
@media (max-width: 600px) {
  .grid-2 > .box,
  .grid-3 > .box {
    flex: 1 1 100%;
  }
}

.grid-4 > .box {
  flex: 1 1 calc(25% - 1rem);
}