.slm-marquee {
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  overflow-y: visible;

  --slm-hover-pad: 0px;
  padding-block: var(--slm-hover-pad);

  --slm-gap: 24px;
  --slm-hover-gap-extra: 16px;
  --slm-hover-scale: 1.2;

  --slm-img-height: 56px;
  --slm-img-width: 120px;

  --slm-media-gap: 8px;

  --slm-fade-width: 60px;
  --slm-fade-edge: 0;
}

.slm-marquee * {
  box-sizing: border-box;
}

.slm-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--slm-gap);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.slm-item {
  flex: 0 0 auto;
  position: relative;
  z-index: 0;
  margin-left: 0;
  margin-right: 0;
  transition: margin 220ms ease;
}

.slm-item:hover {
  z-index: 2;
  margin-left: calc(var(--slm-hover-gap-extra) / 2);
  margin-right: calc(var(--slm-hover-gap-extra) / 2);
}

.slm-item-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: translate3d(0, 0, 0);
  transition: transform 220ms ease;
}

.slm-item:hover .slm-item-box {
  transform: scale(var(--slm-hover-scale));
}

.slm-item-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.slm-item-img {
  display: block;
  height: var(--slm-img-height) !important;
  width: auto !important;
  max-width: none;
  object-fit: contain;
}

.slm-fixed-width .slm-item-img {
  width: var(--slm-img-width) !important;
}

.slm-item-text {
  display: inline-block;
  white-space: nowrap;
}

.slm-item-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--slm-media-gap);
}

.slm-media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.slm-item-label {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.2;
}

.slm-labelpos-below .slm-item-label,
.slm-labelpos-above .slm-item-label {
  width: 100%;
}

.slm-labelpos-below .slm-item-content { flex-direction: column; }
.slm-labelpos-above .slm-item-content { flex-direction: column-reverse; }
.slm-labelpos-right .slm-item-content { flex-direction: row; }
.slm-labelpos-left  .slm-item-content { flex-direction: row-reverse; }

.slm-labelalign-center .slm-item-label { text-align: center; }
.slm-labelalign-left   .slm-item-label { text-align: left; }
.slm-labelalign-right  .slm-item-label { text-align: right; }

.slm-edge-fade {
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--slm-fade-edge)) 0,
    rgba(0, 0, 0, 1) var(--slm-fade-width),
    rgba(0, 0, 0, 1) calc(100% - var(--slm-fade-width)),
    rgba(0, 0, 0, var(--slm-fade-edge)) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--slm-fade-edge)) 0,
    rgba(0, 0, 0, 1) var(--slm-fade-width),
    rgba(0, 0, 0, 1) calc(100% - var(--slm-fade-width)),
    rgba(0, 0, 0, var(--slm-fade-edge)) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .slm-item-box {
    transition: none;
  }
  .slm-track {
    transform: none;
  }
}