.wp-block-ht-logo-carousel {
  position: relative;
  width: 100%;
}

.wp-block-ht-logo-carousel .ht-logo-carousel__viewport {
  overflow: hidden;
  width: 100%;
  min-height: clamp(48px, 6vw, 88px);
  display: flex;
  align-items: center;
}

.wp-block-ht-logo-carousel .ht-logo-carousel__track {
  display: block;
  width: 100%;
}

.wp-block-ht-logo-carousel .ht-logo-carousel__strip {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--wp--preset--spacing--40, 2rem);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.wp-block-ht-logo-carousel .ht-logo-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 96px;
  height: clamp(48px, 6vw, 88px);
  overflow: visible;
}

.wp-block-ht-logo-carousel .ht-logo-carousel__item img {
  display: block;
  height: auto;
  width: auto;
  max-width: 160px;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.wp-block-ht-logo-carousel .ht-logo-carousel__item img:hover,
.wp-block-ht-logo-carousel .ht-logo-carousel__item img:focus {
  opacity: 1;
  filter: grayscale(0%);
}

@media (max-width: 781px) {
  .wp-block-ht-logo-carousel .ht-logo-carousel__item {
    height: clamp(40px, 8vw, 64px);
  }

  .wp-block-ht-logo-carousel .ht-logo-carousel__item img {
    max-width: 140px;
  }
}

@media (max-width: 480px) {
  .wp-block-ht-logo-carousel .ht-logo-carousel__item {
    height: 40px;
  }

  .wp-block-ht-logo-carousel .ht-logo-carousel__item img {
    max-width: 120px;
  }
}