/* Container für die Kurse */
.mentor-courses-section {
  padding: 40px 0;
  text-align: center;  /* Titel zentrieren */
}

/* Galerie-Container für die Kurse */
.course-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* Zentriert die Kurse horizontal */
  gap: 20px;  /* Abstand zwischen den Kursen */
  margin-top: 20px;
}

/* Container für die Kursboxen, sorgt dafür, dass sie zentriert werden */
.courses-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* Zentriert die Kursboxen */
  gap: 20px;
  max-width: 1100px;  /* Maximalbreite der Container (je nach Bedarf anpassbar) */
  margin: 0 auto;  /* Zentriert den Container */
}

/* Kurs-Item */
.course-item {
  width: 270px;  /* Einheitliche Breite der Kurse */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Bild des Kurses */
.image-wrapper {
  width: 100%;
  height: 200px;  /* Feste Höhe für die Bilder */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  width: 120%;  /* Bild um 20% größer */
  max-width: 300px;  /* Maximalgröße von 300px */
  height: 100%;
  object-fit: cover;  /* Zuschneiden des Bildes */
}

/* Titel des Kurses */
.course-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
  color: #333;
}

/* Responsives Layout */
@media (max-width: 767px) {
  .course-item {
      width: 100%;  /* Auf mobilen Geräten füllt der Kurs die gesamte Breite */
  }

  .course-gallery {
      justify-content: center;  /* Zentriert die Kurse auf kleinen Bildschirmen */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .course-item {
      width: 45%;  /* 2 Kurse nebeneinander auf mittleren Bildschirmen */
  }
}

@media (min-width: 1025px) {
  .course-item {
      width: 30%;  /* 3 Kurse nebeneinander auf großen Bildschirmen */
  }
}


/* Slider Elemente */
.gallery-item {
  width: 300px; /* Einheitliche Breite */
  height: 300px; /* Einheitliche Höhe */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #fff;
}

.image-wrapper {
  width: 100%;
  height: 85%; /* 70% der Box für das Bild */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover; /* Zuschneiden, um die Box zu füllen */
}

/* Standardstil für Autorentext */
.mentor-author {
  width: 100%; /* Autorentext füllt die gesamte Breite */
  height: 50px; /* Feste Höhe für den Autorencontainer */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #555;
  padding: 5px;
  background-color: #f9f9f9;
  font-size: 1.6rem;
  font-family: 'Quicksand Bold', Helvetica, Arial, sans-serif;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Anpassung für Smartphones */
@media (max-width: 576px) {
  .mentor-author {
    font-size: 1.2rem; /* Größere Schrift auf Smartphones */
  }
}

/* Anpassung für Tablets */
@media (min-width: 577px) and (max-width: 1024px) {
  .mentor-author {
    font-size: 1.4rem; /* Größere Schrift auf Tablets */
  }
}

/* Anpassung für Laptops */
@media (min-width: 1025px) and (max-width: 1440px) {
  .mentor-author {
    font-size: 1.6rem; /* Größere Schrift auf Laptops */
  }
}