/**
 * Masonry-Container + Item-Breiten.
 * Masonry setzt nur position/left/top – die Karten müssen selbst schmal genug sein,
 * sonst sind alle Items 100 % breit und das Layout kollabiert zu einer Spalte.
 * (Desandro: „The width of your item elements should be set in CSS.“)
 */
[data-magazine-grid] {
  box-sizing: border-box;
  display: flow-root;
  position: relative;
}

[data-magazine-item] {
  box-sizing: border-box;
  /* Masonry: gutter gilt nur für die Spaltenbreite; vertikal = gap-6 (24px). */
  margin-bottom: 24px;
  width: 100%;
}

.magazine-card {
  background-color: #111827;
  min-height: 400px;
}

.magazine-card--short {
  min-height: 400px;
}

.magazine-card--medium {
  min-height: 440px;
}

.magazine-card--tall {
  min-height: 480px;
}

.magazine-card__overlay {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.82) 100%);
}

.magazine-card__content {
  min-height: 44%;
}

.magazine-card__category {
  letter-spacing: 0.04em;
}

.magazine-card__title {
  font-family: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  color: #fff;
}

.magazine-card__title a,
.magazine-card__title a:hover,
.magazine-card__title a:focus-visible {
  color: inherit;
}

@media (min-width: 768px) {
  [data-magazine-item] {
    width: calc((100% - 24px) / 2);
  }
}

@media (min-width: 1024px) {
  [data-magazine-item] {
    width: calc((100% - 48px) / 3);
  }
}