.lclb-carousel {
  --lclb-gap: 32px;
  --lclb-item-width: 180px;
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
}

.lclb-carousel-viewport {
  overflow: hidden;
  width: 100%;
  overscroll-behavior-x: contain;
}

.lclb-carousel-viewport:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.lclb-carousel-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--lclb-gap);
  margin: 0;
  padding: 8px 0;
  list-style: none;
  will-change: scroll-position;
}

.lclb-carousel-item {
  display: grid;
  flex: 0 0 var(--lclb-item-width);
  min-width: 0;
  height: 120px;
  place-items: center;
}

.lclb-carousel-item a {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.lclb-carousel-item img {
  display: block;
  max-width: 100%;
  max-height: 102px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 180ms ease, transform 180ms ease;
}

.lclb-carousel-item a:hover img,
.lclb-carousel-item a:focus-visible img {
  opacity: 0.82;
  transform: scale(1.04);
}

.lclb-site-template {
  width: 100%;
}

@media (max-width: 640px) {
  .lclb-carousel-item {
    height: 96px;
  }

  .lclb-carousel-item img {
    max-height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lclb-carousel-item img {
    transition: none;
  }
}