.workflow-loop-viewport {
  overflow: hidden !important;
  scroll-snap-type: none !important;
}

.workflow-loop-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  padding-bottom: .5rem;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.workflow-loop-card {
  flex: 0 0 320px;
  min-width: 320px !important;
  transform: translateZ(0);
}

.workflow-loop-card > div:first-child > div:first-child {
  animation: workflow-icon-breathe 3.2s cubic-bezier(.16, 1, .3, 1) infinite;
}

.workflow-loop-card:nth-child(2n) > div:first-child > div:first-child {
  animation-delay: .8s;
}

.workflow-loop-card:nth-child(3n) > div:first-child > div:first-child {
  animation-delay: 1.6s;
}

@keyframes workflow-icon-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .72; }
  50% { transform: translate3d(0, -3px, 0); opacity: 1; }
}

@media (min-width: 768px) {
  .workflow-loop-card { flex-basis: 360px; min-width: 360px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-loop-viewport { overflow-x: auto !important; scroll-snap-type: x mandatory !important; }
  .workflow-loop-card { scroll-snap-align: start; }
  .workflow-loop-card > div:first-child > div:first-child { animation: none; }
}
