.fy-craft {
  background: var(--fy-cream);
}
.fy-craft__accent {
  border: 4px solid var(--fy-cream);
  box-shadow: 0 1.25rem 2.5rem oklch(0.2 0.02 60 / 0.25);
}
@keyframes fy-craft-main {
  from {
    transform: translateY(1.875rem);
  }
  to {
    transform: translateY(-1.875rem);
  }
}
@keyframes fy-craft-accent {
  from {
    transform: translateY(3.125rem);
  }
  to {
    transform: translateY(-3.125rem);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fy-craft__main {
      animation: fy-craft-main linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .fy-craft__accent {
      animation: fy-craft-accent linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}