/* ==========================================================================
   r2go4-3cards — Generischer 3-Card-Grid-Frame
   Plain HTML pro Karte: <img> + <h3> + <p> + <span class="more">.
   ========================================================================== */

.r2g-3cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.r2g-3card {
  text-align: left;
  text-decoration: none;
  color: inherit;
  display: block;
}

.r2g-3card > img,
.r2g-3card > picture {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.r2g-3card:hover > img,
.r2g-3card:hover > picture {
  transform: scale(1.05);
}

.r2g-3card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
}

/* Fließtext bleibt Body-Color, kein Hover-Color-Shift via globaler a:hover-Regel —
   Card als Ganzes bleibt klickbar, nur der <p> ignoriert die a-Color. */
.r2g-3card:hover p {
  color: var(--color-text);
}

@media (max-width: 991px) {
  .r2g-3cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 767px) {
  .r2g-3cards {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}