
.events{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Dynamische Anpassung der Spalten */
  grid-gap: 1rem;
  padding: 0px;
}

.events img{
  width: 100%; /* Vollständige Breite innerhalb des Grid-Elements */
  height: auto; /* Beibehaltung des Seitenverhältnisses */
  margin: .25rem;
}

.events li:hover{
  transform: scale(1.05); /* Subtilerer Hover-Effekt */
  transition: transform .5s;
}

.events li a:hover{
  color: rgba(174, 126, 92, 0.776);
}

.events li a {
  color: #000;
}

.events li a figcaption{
  font-size: 14px; /* Angepasste Schriftgröße für bessere Lesbarkeit */
}

@media (min-width: 600px) {
  .events{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Anpassung der mindest Breite der Spalten */
  }

  .events li a figcaption{
    font-size: 16px; /* Zurück zur ursprünglichen Schriftgröße */
  }
}

@media (min-width: 768px) {
  .events {
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf Tablets */
  }
}

@media (min-width: 1024px) {
  .events {
    grid-template-columns: repeat(4, 1fr); /* Zurück zu 4 Spalten auf größeren Bildschirmen */
  }
}
