.grid {
  --gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
  align-items: stretch;
}

/* Kort – fælles stil */
.grid > .card {
  box-sizing: border-box;
  flex: 1 1 100%;       /* default: 1 kolonne på mobil */
  min-width: 330px;
  max-width: 500px;
  width: 100%;
}

/* 📱 Mobil (<600px) → 1 kolonne */
@media (max-width: 600px) {
  .grid {
    justify-content: stretch;
    gap: 10px;
  }
  .grid > .card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* 💻 Tablet (601–1024px) → 2 kolonner */
@media (min-width: 601px) and (max-width: 1024px) {
  .grid > .card {
    flex: 1 1 calc((100% - var(--gap)) / 2);
  }
}

/* 🖥️ Desktop (>1024px) → 3 kolonner */
@media (min-width: 1025px) {
  .grid > .card {
    flex: 1 1 calc((100% - (2 * var(--gap))) / 3);
  }
}