.cae-image-marquee {
  --cae-marquee-gap: 24px;
  --cae-marquee-item-width: 280px;
  --cae-marquee-item-height: 220px;
  --cae-marquee-hover-scale: 1;
  --cae-marquee-hover-opacity: 1;
  --cae-marquee-transition: 250ms;
  --cae-marquee-fade: 70px;
  width: 100%;
  max-width: 100%;
}

.cae-image-marquee__viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.cae-image-marquee__track {
  display: flex;
  width: max-content;
  max-width: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.cae-image-marquee[data-direction="up"] .cae-image-marquee__track,
.cae-image-marquee[data-direction="down"] .cae-image-marquee__track {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.cae-image-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: var(--cae-marquee-gap);
  box-sizing: border-box;
}

.cae-image-marquee[data-direction="left"] .cae-image-marquee__group,
.cae-image-marquee[data-direction="right"] .cae-image-marquee__group {
  flex-direction: row;
  padding-inline-end: var(--cae-marquee-gap);
}

.cae-image-marquee[data-direction="up"] .cae-image-marquee__group,
.cae-image-marquee[data-direction="down"] .cae-image-marquee__group {
  flex-direction: column;
  width: 100%;
  padding-block-end: var(--cae-marquee-gap);
}

.cae-image-marquee__item {
  position: relative;
  flex: 0 0 auto;
  width: var(--cae-marquee-item-width);
  height: var(--cae-marquee-item-height);
  overflow: hidden;
  box-sizing: border-box;
}

.cae-image-marquee[data-direction="up"] .cae-image-marquee__item,
.cae-image-marquee[data-direction="down"] .cae-image-marquee__item {
  margin-inline: auto;
}

.cae-image-marquee__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}

.cae-image-marquee__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transition:
    transform var(--cae-marquee-transition) ease,
    opacity var(--cae-marquee-transition) ease;
}

.cae-image-marquee__item:hover .cae-image-marquee__image,
.cae-image-marquee__item:focus-within .cae-image-marquee__image {
  transform: scale(var(--cae-marquee-hover-scale));
  opacity: var(--cae-marquee-hover-opacity);
}

.cae-image-marquee[data-edge-fade="yes"][data-direction="left"] .cae-image-marquee__viewport,
.cae-image-marquee[data-edge-fade="yes"][data-direction="right"] .cae-image-marquee__viewport {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cae-marquee-fade),
    #000 calc(100% - var(--cae-marquee-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--cae-marquee-fade),
    #000 calc(100% - var(--cae-marquee-fade)),
    transparent 100%
  );
}

.cae-image-marquee[data-edge-fade="yes"][data-direction="up"] .cae-image-marquee__viewport,
.cae-image-marquee[data-edge-fade="yes"][data-direction="down"] .cae-image-marquee__viewport {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--cae-marquee-fade),
    #000 calc(100% - var(--cae-marquee-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--cae-marquee-fade),
    #000 calc(100% - var(--cae-marquee-fade)),
    transparent 100%
  );
}

.cae-image-marquee.is-paused .cae-image-marquee__track {
  will-change: auto;
}

.cae-image-marquee__group.is-cae-clone {
  pointer-events: none;
}

.cae-image-marquee__group.is-cae-clone a,
.cae-image-marquee__group.is-cae-clone button,
.cae-image-marquee__group.is-cae-clone input,
.cae-image-marquee__group.is-cae-clone select,
.cae-image-marquee__group.is-cae-clone textarea,
.cae-image-marquee__group.is-cae-clone [tabindex] {
  pointer-events: none;
}

.cae-image-marquee__empty {
  padding: 18px;
  border: 1px dashed #b7bcc5;
  border-radius: 4px;
  background: #f7f8fa;
  color: #5d6570;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cae-image-marquee[data-respect-reduced-motion="yes"] .cae-image-marquee__track {
    transform: none !important;
    will-change: auto;
  }
}