.hasjs [data-animate] {
  opacity: 0
}
#storybook-root [data-animate] {
  opacity: 0
}
.hasjs .animate {
  opacity: 1
}
#storybook-root .animate {
  opacity: 1
}
.animate--fade-in {
  animation: fade-in 1s ease-in both
}
.animate--fade-in-left {
  animation: fade-in-left .6s ease-in both
}
.animate--fade-in-top {
  animation: fade-in-top .6s ease-in both
}
.animate--fade-in-left {
  animation: fade-in-left .6s ease-in both
}
.animate[data-animation-duration="0"] {
  animation-duration: 0s
}
.animate[data-animation-delay="0"] {
  animation-delay: 0s
}
.animate[data-animation-duration="50"] {
  animation-duration: 50ms
}
.animate[data-animation-delay="50"] {
  animation-delay: 50ms
}
.animate[data-animation-duration="100"] {
  animation-duration: .1s
}
.animate[data-animation-delay="100"] {
  animation-delay: .1s
}
.animate[data-animation-duration="150"] {
  animation-duration: 150ms
}
.animate[data-animation-delay="150"] {
  animation-delay: 150ms
}
.animate[data-animation-duration="200"] {
  animation-duration: .2s
}
.animate[data-animation-delay="200"] {
  animation-delay: .2s
}
.animate[data-animation-duration="250"] {
  animation-duration: 250ms
}
.animate[data-animation-delay="250"] {
  animation-delay: 250ms
}
.animate[data-animation-duration="300"] {
  animation-duration: .3s
}
.animate[data-animation-delay="300"] {
  animation-delay: .3s
}
.animate[data-animation-duration="350"] {
  animation-duration: 350ms
}
.animate[data-animation-delay="350"] {
  animation-delay: 350ms
}
.animate[data-animation-duration="400"] {
  animation-duration: .4s
}
.animate[data-animation-delay="400"] {
  animation-delay: .4s
}
.animate[data-animation-duration="450"] {
  animation-duration: 450ms
}
.animate[data-animation-delay="450"] {
  animation-delay: 450ms
}
.animate[data-animation-duration="500"] {
  animation-duration: .5s
}
.animate[data-animation-delay="500"] {
  animation-delay: .5s
}
.animate[data-animation-duration="550"] {
  animation-duration: 550ms
}
.animate[data-animation-delay="550"] {
  animation-delay: 550ms
}
.animate[data-animation-duration="600"] {
  animation-duration: .6s
}
.animate[data-animation-delay="600"] {
  animation-delay: .6s
}
.animate[data-animation-duration="650"] {
  animation-duration: 650ms
}
.animate[data-animation-delay="650"] {
  animation-delay: 650ms
}
.animate[data-animation-duration="700"] {
  animation-duration: .7s
}
.animate[data-animation-delay="700"] {
  animation-delay: .7s
}
.animate[data-animation-duration="750"] {
  animation-duration: 750ms
}
.animate[data-animation-delay="750"] {
  animation-delay: 750ms
}
.animate[data-animation-duration="800"] {
  animation-duration: .8s
}
.animate[data-animation-delay="800"] {
  animation-delay: .8s
}
.animate[data-animation-duration="850"] {
  animation-duration: 850ms
}
.animate[data-animation-delay="850"] {
  animation-delay: 850ms
}
.animate[data-animation-duration="900"] {
  animation-duration: .9s
}
.animate[data-animation-delay="900"] {
  animation-delay: .9s
}
.animate[data-animation-duration="950"] {
  animation-duration: 950ms
}
.animate[data-animation-delay="950"] {
  animation-delay: 950ms
}
.animate[data-animation-duration="1000"] {
  animation-duration: 1s
}
.animate[data-animation-delay="1000"] {
  animation-delay: 1s
}
.animate[data-animation-duration="1050"] {
  animation-duration: 1.05s
}
.animate[data-animation-delay="1050"] {
  animation-delay: 1.05s
}
.animate[data-animation-duration="1100"] {
  animation-duration: 1.1s
}
.animate[data-animation-delay="1100"] {
  animation-delay: 1.1s
}
.animate[data-animation-duration="1150"] {
  animation-duration: 1.15s
}
.animate[data-animation-delay="1150"] {
  animation-delay: 1.15s
}
.animate[data-animation-duration="1200"] {
  animation-duration: 1.2s
}
.animate[data-animation-delay="1200"] {
  animation-delay: 1.2s
}
.animate[data-animation-duration="1250"] {
  animation-duration: 1.25s
}
.animate[data-animation-delay="1250"] {
  animation-delay: 1.25s
}
.animate[data-animation-duration="1300"] {
  animation-duration: 1.3s
}
.animate[data-animation-delay="1300"] {
  animation-delay: 1.3s
}
.animate[data-animation-duration="1350"] {
  animation-duration: 1.35s
}
.animate[data-animation-delay="1350"] {
  animation-delay: 1.35s
}
.animate[data-animation-duration="1400"] {
  animation-duration: 1.4s
}
.animate[data-animation-delay="1400"] {
  animation-delay: 1.4s
}
.animate[data-animation-duration="1450"] {
  animation-duration: 1.45s
}
.animate[data-animation-delay="1450"] {
  animation-delay: 1.45s
}
.animate[data-animation-duration="1500"] {
  animation-duration: 1.5s
}
.animate[data-animation-delay="1500"] {
  animation-delay: 1.5s
}
.animate[data-animation-duration="1550"] {
  animation-duration: 1.55s
}
.animate[data-animation-delay="1550"] {
  animation-delay: 1.55s
}
.animate[data-animation-duration="1600"] {
  animation-duration: 1.6s
}
.animate[data-animation-delay="1600"] {
  animation-delay: 1.6s
}
.animate[data-animation-duration="1650"] {
  animation-duration: 1.65s
}
.animate[data-animation-delay="1650"] {
  animation-delay: 1.65s
}
.animate[data-animation-duration="1700"] {
  animation-duration: 1.7s
}
.animate[data-animation-delay="1700"] {
  animation-delay: 1.7s
}
.animate[data-animation-duration="1750"] {
  animation-duration: 1.75s
}
.animate[data-animation-delay="1750"] {
  animation-delay: 1.75s
}
.animate[data-animation-duration="1800"] {
  animation-duration: 1.8s
}
.animate[data-animation-delay="1800"] {
  animation-delay: 1.8s
}
.animate[data-animation-duration="1850"] {
  animation-duration: 1.85s
}
.animate[data-animation-delay="1850"] {
  animation-delay: 1.85s
}
.animate[data-animation-duration="1900"] {
  animation-duration: 1.9s
}
.animate[data-animation-delay="1900"] {
  animation-delay: 1.9s
}
.animate[data-animation-duration="1950"] {
  animation-duration: 1.95s
}
.animate[data-animation-delay="1950"] {
  animation-delay: 1.95s
}
.animate[data-animation-duration="2000"] {
  animation-duration: 2s
}
.animate[data-animation-delay="2000"] {
  animation-delay: 2s
}
@keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateY(3rem)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-3rem)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
.skeleton-box {
  position: relative;
  display: inline-block;
  height: 1.6rem;
  width: 100%;
  min-width: 10rem;
  overflow: hidden;
  background-color: var(--base-3)
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));
  animation: shimmer 5s infinite;
  content: ""
}
@keyframes shimmer {
  100% {
    transform: translateX(100%)
  }
}
.card-container {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sm-1)
}
.card__image-box .skeleton-box {
  aspect-ratio: 1/1;
  height: auto
}
.card__body {
  padding: var(--sm-2)
}