/* Grundlayout: 4 kolumner (4×3) */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 30px; /* kolumn- och radavstånd */
  grid-auto-flow: row dense; /* fyll rad för rad utan hål */
  margin: 0 auto;
  max-width: 1200px; /* valfritt för centrering */
}

/* Grid-items */
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.grid-item figure {
  margin: 0;
}

.grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Rubriker och text */
.grid-container h3 {
  font-size: 1.1em;
  line-height: 1.2rem;
  margin: 0;
  text-align: center;
}

.grid-container p {
  margin: 0;
}

/* Responsiva brytpunkter */
@media screen and (max-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3×4 */
  }
}

@media screen and (max-width: 700px) {
  .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2×6 */
  }
}

@media screen and (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1×12 */
  }
}