/* Carousel-specific responsive fixes (separate file so edits are easy) */
.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 80vh;
}

.carousel-caption {
  left: 0;
  right: 0;
  bottom: 10%;
  padding: 0;
}

.carousel-caption .p-3 {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
  text-align: center;
}

.carousel-caption .p-3 h1,
.carousel-caption .p-3 .display-3 {
  font-size: 2.2rem;
  line-height: 1.1;
}

@media (max-width: 767.98px) {
  .carousel-caption { bottom: 8%; }
  .carousel-caption .p-3 { padding: 0 0.75rem; }
  .carousel-caption .p-3 h1,
  .carousel-caption .p-3 .display-3 { font-size: 1.6rem; }
  .carousel-caption a.btn { display: inline-block; margin: 6px 6px 0; }
}

@media (max-width: 575.98px) {
  .carousel-caption { bottom: 6%; }
  .carousel-caption .p-3 { max-width: 92% !important; }
  .carousel-caption .p-3 h1,
  .carousel-caption .p-3 .display-3 { font-size: 1.4rem !important; }
  .carousel-caption a.btn { padding: 0.5rem 0.9rem; }
}