/* Homepage offer photos: native gallery scrolling works without JavaScript. */
.offer-section .course-online-card,
.offer-section .path-card-featured { min-width: 0; overflow: clip; }
.offer-section .tutor-card-photo {
  height: clamp(220px, 21vw, 292px);
  margin: 0 0 25px;
  overflow: hidden;
  border: 1px solid rgba(239, 64, 59, .28);
  border-radius: 13px;
  background: #050505;
}
.offer-section .tutor-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 31%;
}
.offer-section .course-card-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 46%, 220px);
  gap: 12px;
  width: 100%;
  height: auto;
  padding: 0 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #25211b;
}
.offer-section .course-card-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(215, 181, 109, .2);
  border-radius: 13px;
  scroll-snap-align: start;
}
.offer-section .course-card-photos:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
@media (max-width: 600px) {
  .offer-section .course-card-photos { grid-auto-columns: 78%; gap: 10px; }
}