.carousel-cards {
  position: relative;
}

.carousel-cards-images {
  justify-content: center;
  gap: 0 !important;
  img{
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 1000px !important; 
    margin: 6px !important;
    cursor: pointer !important;
  }
}

.carousel-cards-images img.is-active {
  margin: 0 !important;
  padding: 4px !important;
  border: 2px solid #00665E !important;
  border-radius: 1000px !important;
  width: 52px !important;
  height: 52px !important;
}

.carousel-cards-viewport {
  overflow: hidden;
  width: 100%;
}

.carousel-cards-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.carousel-cards-slide {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex: 0 0 23% !important;
  min-width: 0;
  margin-right: 24px !important;
  cursor: pointer;
  transition: opacity 0.4s ease;
  opacity: 0.4;
  transform: scale(0.9);
}

.carousel-cards-slide-bottom-section {
  img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 1000px !important; 
  }
}

.carousel-cards-slide a {
  color: inherit !important;        
  font-size: inherit !important;
  font-family: inherit !important;  
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;       
}

.carousel-cards-slide a:hover {
  color: inherit !important;        
  font-size: inherit !important;
  font-family: inherit !important;  
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;  
}

.carousel-cards-slide a span {
  display: none !important;
}

.carousel-cards-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.carousel-cards-slide.is-neighbor {
  opacity: 0.5;
  transform: scale(1);
  z-index: 1;
}

.carousel-cards-slide.is-far {
  opacity: 0.5;
  transform: scale(1);
}

.carousel-cards-controls {
  display: flex;
  justify-content: center;
}

.carousel-cards-button-prev,
.carousel-cards-button-next {
  cursor: pointer;

  .wp-block-button__link {
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    img {
      height: 24px !important;
    }
  }
}

@media (max-width: 1300px) {
  .carousel-cards-slide {
    flex: 0 0 30% !important;
  }
}

@media (max-width: 800px) {
  .carousel-cards-slide {
    flex: 0 0 40% !important;
  }
}

@media (max-width: 700px) {
  .carousel-cards-slide {
    flex: 0 0 50% !important;
  }
}

@media (max-width: 550px) {
  .carousel-cards-images {
    justify-content: center;
    gap: 0 !important;
    img{
      width: 35px !important;
      height: 35px !important;
      object-fit: cover !important;
      object-position: top center !important;
      border-radius: 1000px !important; 
      margin: 6px !important;
      cursor: pointer !important;
    }
  }
  
  .carousel-cards-images img.is-active {
    margin: 0 !important;
    padding: 4px !important;
    border: 2px solid #00665E !important;
    border-radius: 1000px !important;
    width: 47px !important;
    height: 47px !important;
  }

  .carousel-cards-slide {
    flex: 0 0 65% !important;
    max-width: 270px;
    margin-right: 16px !important;
  }
}

@media (max-width: 430px) {
  .carousel-cards-images {
    justify-content: center;
    gap: 0 !important;
    img{
      width: 30px !important;
      height: 30px !important;
      object-fit: cover !important;
      object-position: top center !important;
      border-radius: 1000px !important; 
      margin: 6px !important;
      cursor: pointer !important;
    }
  }
  
  .carousel-cards-images img.is-active {
    margin: 0 !important;
    padding: 4px !important;
    border: 2px solid #00665E !important;
    border-radius: 1000px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .carousel-cards-slide {
    flex: 0 0 65% !important;
    max-width: 240px;
  }
}

@media (max-width: 375px) {
  .carousel-cards-images {
    visibility: hidden !important;
  }
}