.hm-feature-loop {
  --hm-fl-card-gap: 18px;
  --hm-fl-hover-lift: 0px;
  --hm-fl-distance: 28px;
  --hm-fl-blur: 0px;
  --hm-fl-duration: 520ms;
  --hm-fl-stagger: 90ms;
  --hm-fl-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-fl-enter-x: 0px;
  --hm-fl-enter-y: var(--hm-fl-distance);
  --hm-fl-exit-x: 0px;
  --hm-fl-exit-y: calc(var(--hm-fl-distance) * -1);
  --hm-fl-enter-rotate-x: 0deg;
  --hm-fl-enter-rotate-y: 0deg;
  --hm-fl-exit-rotate-x: 0deg;
  --hm-fl-exit-rotate-y: 0deg;
  --hm-fl-enter-origin: center;
  --hm-fl-exit-origin: center;
  --hm-fl-perspective: 900px;
  --hm-fl-cube-depth: 0px;
  display: block;
  width: 100%;
}

.hm-feature-loop__track {
  display: grid;
  width: 100%;
  perspective: var(--hm-fl-perspective);
  transform-style: preserve-3d;
}

.hm-feature-loop[data-animation-style="cube"] .hm-feature-loop__track {
  perspective-origin: center;
}

.hm-feature-loop__group {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  visibility: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
}

.hm-feature-loop__group.is-active,
.hm-feature-loop__group.is-exiting {
  visibility: visible;
}

.hm-feature-loop__group.is-active {
  pointer-events: auto;
}

.hm-feature-loop__item {
  min-width: 0;
  opacity: 0;
  transform: translate3d(var(--hm-fl-enter-x), var(--hm-fl-enter-y), 0)
    rotateX(var(--hm-fl-enter-rotate-x))
    rotateY(var(--hm-fl-enter-rotate-y));
  transform-origin: var(--hm-fl-enter-origin);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: blur(var(--hm-fl-blur));
  transition-property: opacity, transform, filter;
  transition-duration: var(--hm-fl-duration);
  transition-delay: calc(var(--hm-fl-index) * var(--hm-fl-stagger));
  transition-timing-function: var(--hm-fl-easing);
  will-change: opacity, transform, filter;
}

.hm-feature-loop:not(.is-ready) .hm-feature-loop__item {
  transition: none;
}

.hm-feature-loop__group.is-active .hm-feature-loop__item {
  opacity: var(--hm-fl-active-opacity, 1);
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  transform-origin: center;
  filter: blur(0);
}

.hm-feature-loop__group.is-exiting .hm-feature-loop__item {
  opacity: 0;
  transform: translate3d(var(--hm-fl-exit-x), var(--hm-fl-exit-y), 0)
    rotateX(var(--hm-fl-exit-rotate-x))
    rotateY(var(--hm-fl-exit-rotate-y));
  transform-origin: var(--hm-fl-exit-origin);
  filter: blur(var(--hm-fl-blur));
  transition-delay: calc(var(--hm-fl-exit-index) * var(--hm-fl-stagger));
}

.hm-feature-loop[data-animation-style="cube"] .hm-feature-loop__item {
  opacity: 1;
  transform: translateZ(calc(var(--hm-fl-cube-depth) * -1))
    rotateX(var(--hm-fl-enter-rotate-x))
    rotateY(var(--hm-fl-enter-rotate-y))
    translateZ(var(--hm-fl-cube-depth));
  transform-origin: center;
  filter: none;
  transition-property: transform;
}

.hm-feature-loop[data-animation-style="cube"] .hm-feature-loop__group.is-active .hm-feature-loop__item {
  transform: translateZ(calc(var(--hm-fl-cube-depth) * -1))
    rotateX(0deg)
    rotateY(0deg)
    translateZ(var(--hm-fl-cube-depth));
}

.hm-feature-loop[data-animation-style="cube"] .hm-feature-loop__group.is-exiting .hm-feature-loop__item {
  opacity: 1;
  transform: translateZ(calc(var(--hm-fl-cube-depth) * -1))
    rotateX(var(--hm-fl-exit-rotate-x))
    rotateY(var(--hm-fl-exit-rotate-y))
    translateZ(var(--hm-fl-cube-depth));
  filter: none;
}

.hm-feature-loop__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hm-fl-card-gap);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
  backface-visibility: hidden;
}

a.hm-feature-loop__card:hover,
a.hm-feature-loop__card:focus-visible,
.hm-feature-loop__card:hover {
  transform: translateY(calc(var(--hm-fl-hover-lift) * -1));
}

a.hm-feature-loop__card:focus-visible {
  outline: 2px solid var(--hm-accent-primary, #fb5681);
  outline-offset: 3px;
}

.hm-feature-loop[data-card-direction="horizontal"] .hm-feature-loop__card {
  flex-direction: row;
}

.hm-feature-loop[data-alignment="start"] .hm-feature-loop__card {
  align-items: flex-start;
  text-align: left;
}

.hm-feature-loop[data-alignment="end"] .hm-feature-loop__card {
  align-items: flex-end;
  text-align: right;
}

.hm-feature-loop[data-card-direction="horizontal"][data-alignment="start"] .hm-feature-loop__card {
  justify-content: flex-start;
  align-items: center;
}

.hm-feature-loop[data-card-direction="horizontal"][data-alignment="end"] .hm-feature-loop__card {
  justify-content: flex-end;
  align-items: center;
}

.hm-feature-loop__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  max-width: 100%;
}

.hm-feature-loop__logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hm-feature-loop__logo-color {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--hm-fl-logo-source);
  mask-image: var(--hm-fl-logo-source);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.hm-feature-loop[data-logo-fit="cover"] .hm-feature-loop__logo-image {
  object-fit: cover;
}

.hm-feature-loop[data-logo-fit="cover"] .hm-feature-loop__logo-color {
  -webkit-mask-size: cover;
  mask-size: cover;
}

.hm-feature-loop[data-logo-fit="fill"] .hm-feature-loop__logo-image {
  object-fit: fill;
}

.hm-feature-loop[data-logo-fit="fill"] .hm-feature-loop__logo-color {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hm-feature-loop__logo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.hm-feature-loop__title {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  letter-spacing: 0;
  white-space: nowrap;
}

.hm-feature-loop__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-align: inherit;
}

.hm-feature-loop[data-card-direction="vertical"] .hm-feature-loop__copy {
  width: 100%;
}

.hm-feature-loop__text {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: inherit;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.hm-feature-loop__text > :first-child {
  margin-top: 0;
}

.hm-feature-loop__text > :last-child {
  margin-bottom: 0;
}

.hm-feature-loop[data-fade="0"] {
  --hm-fl-active-opacity: 1;
}

.hm-feature-loop[data-fade="0"] .hm-feature-loop__item {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hm-feature-loop[data-reduced-motion="1"] .hm-feature-loop__item,
  .hm-feature-loop[data-reduced-motion="1"] .hm-feature-loop__card {
    transition: none !important;
  }
}