/* Media-Grid für Video-/Bild-Teaser */
.media {
  width: 100%;
}

/* Das vorhandene <p> wird zum Grid */
.media p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
}

/* Links als Blockelemente */
.media a {
  display: block;
  text-decoration: none;
}

/* Bilder sauber skalieren */
.media img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border: 0;
}

/* Tablet: 2 Bilder nebeneinander */
@media (max-width: 900px) {
  .media p {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Smartphone: 1 Bild pro Reihe */
@media (max-width: 600px) {
  .media p {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.media a {
  display: block;
  overflow: hidden;
}

.media img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.media a:hover img {
  transform: scale(0.96);
  opacity: 0.9;
}