.image-carousel-v2-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1320px;
  margin: 30px auto;
  gap: 0.8rem;
  box-sizing: border-box;
  --slides-to-show: 2;  /* Default to 2 slides for mobile */
}

/* Track Container */
.image-carousel-v2-track-container {
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 10px;
}

/* Track */
.image-carousel-v2-track {
  display: flex;
  position: relative;
  align-items: center;
  transition: transform 300ms ease;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 15px;  /* Smaller gap for mobile */
  width: 100%;
}

.image-carousel-v2-container.equal-height .image-carousel-v2-track {
  align-items: stretch;
}

/* Slides */
.image-carousel-v2-slide {
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - 15px) / 2); /* Mobile: 2 slides with 15px gap */
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 300ms ease;
}

.image-carousel-v2-container.equal-height .image-carousel-v2-slide {
  height: var(--slide-height, auto);
  display: flex;
}

.image-carousel-v2-slide img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

.image-carousel-v2-container.equal-height .image-carousel-v2-slide img {
  object-fit: contain;
  height: var(--slide-height, auto);
  max-height: 100%;
  width: auto;
  max-width: 100%;
  margin: auto;
}

.image-carousel-v2-slide a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.image-carousel-v2-container.equal-height .image-carousel-v2-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.image-carousel-v2-slide a:hover {
  opacity: 0.8;
}

/* Buttons */
.image-carousel-v2-button {
  display: flex;
  padding: .5rem;
  align-items: center;
  gap: 8px;
  border: 1px solid #003D7C;
}

.image-carousel-v2-button.right svg {
  transform: rotate(180deg);
}

.image-carousel-v2-button:focus {
  outline: none;
}

/* Hide buttons on small screens if desired */
@media (max-width: 480px) {
  .image-carousel-v2-button {
    font-size: 1.5rem;
  }
}

@media (min-width: 481px) {
  .image-carousel-v2-container {
    --slides-to-show: attr(data-slides-to-show);
    gap: 1.2rem;
    margin: 50px auto;
  }

  .image-carousel-v2-track-container {
    margin: 0 20px;
  }

  .image-carousel-v2-track {
    gap: 30px;
  }

  .image-carousel-v2-slide {
    width: calc((100% - (30px * (var(--slides-to-show) - 1))) / var(--slides-to-show));
  }
}