.activity-carousel {
  --cards-visible: 4;
  --card-gap: 10px;
  --card-radius: 12px;
  width: 100%;
  /* max-width: 1200px; */
  height: auto;
  background-color: transparent;

}

.program-activity-carousel {
  --cards-visible: 2;
  --card-gap: 20px;
  --card-radius: 12px;
  width: 100%;
  /* max-width: 1200px; */
  height: auto;
  background-color: transparent;

}



.carousel-viewport {

    

  width: 100%;

  overflow: hidden;

  cursor: grab;

  touch-action: pan-y;

  user-select: none;

}



.carousel-viewport.is-dragging {

  cursor: grabbing;

}



.carousel-track {

  display: flex;

  gap: var(--card-gap);

  will-change: transform;

  transition: transform 0.45s ease;

}



.carousel-viewport.is-dragging .carousel-track {

  transition: none;

}



.carousel-card {

  flex: 0 0 calc(

    (100% - ((var(--cards-visible) - 1) * var(--card-gap))) /

    var(--cards-visible)

  );

  overflow: hidden;
  margin: 10px 0;

}



.carousel-card img:where(:not(.faculty-card-image)) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  pointer-events: none;
}



.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 52px;
  padding: 14px 4px 0;
}



.carousel-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}



.carousel-dot {

  width: 5px;

  height: 5px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #d5d5d5;

  cursor: pointer;

  transition:

    width 0.25s ease,

    border-radius 0.25s ease,

    background 0.25s ease;

}



.carousel-dot.is-active {

  width: 18px;

  border-radius: 10px;

  background: #f22929;

}



.carousel-next {

  display: grid;

  place-items: center;

  width: 28px;

  height: 28px;

  margin-left: 5px;

  padding: 0;

  border: 0;

  background: transparent;

  color: #f22929;

  cursor: pointer;

  font-size: 18px;

  line-height: 1;

}



.carousel-next:hover {

  transform: translateX(2px);

}



@media (max-width: 900px) {

  .activity-carousel {

    --cards-visible: 3;

  }

}



@media (max-width: 650px) {

  .activity-carousel {

    --cards-visible: 2;

  }

}



@media (max-width: 420px) {

  .activity-carousel {

    --cards-visible: 1;

  }

}