/* Container */
.cbc-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Track translates by 100% per "page" */
.cbc-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  gap: 10px;
}

/* Slide sizing: 1 per view by default, then 2, then 3 */
.cbc-slide {
  flex: 0 0 100%;
  position: relative;
  user-select: none;
}
@media (min-width: 768px) { .cbc-slide { flex-basis: 50%; } }        /* 2 per view */
@media (min-width: 1024px) { .cbc-slide { flex-basis: 33.3333%; } }  /* 3 per view */

/* Image and caption */
.cbc-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.cbc-caption {
  /*position: absolute;*/
  /*left: 0; right: 0; bottom: 0;*/
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.95rem;
}

/* Navigation buttons */
.cbc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0,0,0,0.45);
  color: #fff;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  line-height: 2.25rem;
  text-align: center;
  font-size: 1.5rem;
}
.cbc-prev { left: 0.5rem; }
.cbc-next { right: 0.5rem; }

/* Dots */
.cbc-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.cbc-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
}
.cbc-dot.is-active {
  background: #333;
}

/* Magnific Popup: allow the image to fill more of the viewport */
.mfp-img {
  max-width: calc(100vw - 80px) !important;  /* leave some side padding */
  max-height: calc(100vh - 120px) !important; /* leave top/bottom padding */
  width: 100vw !important;
  height: 100vh !important;
}

/* Optional: constrain the content area a bit so upscaling centers nicely */
.mfp-content {
  max-width: 100vw;
}