.ip3-edit.hasjs [data-animate] {
  opacity: 1!important
}
.hasjs [data-animate] {
  opacity: 0
}
#storybook-root [data-animate] {
  opacity: 0
}
.hasjs .animate {
  opacity: 1
}
#storybook-root .animate {
  opacity: 1
}
@media (prefers-reduced-motion:reduce) {
  .hasjs [data-animate] {
    opacity: 1
  }
  #storybook-root [data-animate] {
    opacity: 1
  }
}
@media not (prefers-reduced-motion:reduce) {
  .animate--fade-in {
    animation: fade-in 1s ease-in both
  }
}
@media not (prefers-reduced-motion:reduce) {
  .animate--fade-in-left {
    animation: fade-in-left .6s ease-in both
  }
}
@media not (prefers-reduced-motion:reduce) {
  .animate--fade-in-top {
    animation: fade-in-top .6s ease-in both
  }
}
.animate[data-animation-duration="0"] {
  animation-duration: 0s;
  --anim-dur: 0ms
}
.animate[data-animation-delay="0"] {
  animation-delay: 0s
}
.animate[data-animation-duration="50"] {
  animation-duration: 50ms;
  --anim-dur: 50ms
}
.animate[data-animation-delay="50"] {
  animation-delay: 50ms
}
.animate[data-animation-duration="100"] {
  animation-duration: .1s;
  --anim-dur: 100ms
}
.animate[data-animation-delay="100"] {
  animation-delay: .1s
}
.animate[data-animation-duration="150"] {
  animation-duration: 150ms;
  --anim-dur: 150ms
}
.animate[data-animation-delay="150"] {
  animation-delay: 150ms
}
.animate[data-animation-duration="200"] {
  animation-duration: .2s;
  --anim-dur: 200ms
}
.animate[data-animation-delay="200"] {
  animation-delay: .2s
}
.animate[data-animation-duration="250"] {
  animation-duration: 250ms;
  --anim-dur: 250ms
}
.animate[data-animation-delay="250"] {
  animation-delay: 250ms
}
.animate[data-animation-duration="300"] {
  animation-duration: .3s;
  --anim-dur: 300ms
}
.animate[data-animation-delay="300"] {
  animation-delay: .3s
}
.animate[data-animation-duration="350"] {
  animation-duration: 350ms;
  --anim-dur: 350ms
}
.animate[data-animation-delay="350"] {
  animation-delay: 350ms
}
.animate[data-animation-duration="400"] {
  animation-duration: .4s;
  --anim-dur: 400ms
}
.animate[data-animation-delay="400"] {
  animation-delay: .4s
}
.animate[data-animation-duration="450"] {
  animation-duration: 450ms;
  --anim-dur: 450ms
}
.animate[data-animation-delay="450"] {
  animation-delay: 450ms
}
.animate[data-animation-duration="500"] {
  animation-duration: .5s;
  --anim-dur: 500ms
}
.animate[data-animation-delay="500"] {
  animation-delay: .5s
}
.animate[data-animation-duration="550"] {
  animation-duration: 550ms;
  --anim-dur: 550ms
}
.animate[data-animation-delay="550"] {
  animation-delay: 550ms
}
.animate[data-animation-duration="600"] {
  animation-duration: .6s;
  --anim-dur: 600ms
}
.animate[data-animation-delay="600"] {
  animation-delay: .6s
}
.animate[data-animation-duration="650"] {
  animation-duration: 650ms;
  --anim-dur: 650ms
}
.animate[data-animation-delay="650"] {
  animation-delay: 650ms
}
.animate[data-animation-duration="700"] {
  animation-duration: .7s;
  --anim-dur: 700ms
}
.animate[data-animation-delay="700"] {
  animation-delay: .7s
}
.animate[data-animation-duration="750"] {
  animation-duration: 750ms;
  --anim-dur: 750ms
}
.animate[data-animation-delay="750"] {
  animation-delay: 750ms
}
.animate[data-animation-duration="800"] {
  animation-duration: .8s;
  --anim-dur: 800ms
}
.animate[data-animation-delay="800"] {
  animation-delay: .8s
}
.animate[data-animation-duration="850"] {
  animation-duration: 850ms;
  --anim-dur: 850ms
}
.animate[data-animation-delay="850"] {
  animation-delay: 850ms
}
.animate[data-animation-duration="900"] {
  animation-duration: .9s;
  --anim-dur: 900ms
}
.animate[data-animation-delay="900"] {
  animation-delay: .9s
}
.animate[data-animation-duration="950"] {
  animation-duration: 950ms;
  --anim-dur: 950ms
}
.animate[data-animation-delay="950"] {
  animation-delay: 950ms
}
.animate[data-animation-duration="1000"] {
  animation-duration: 1s;
  --anim-dur: 1000ms
}
.animate[data-animation-delay="1000"] {
  animation-delay: 1s
}
.animate[data-animation-duration="1050"] {
  animation-duration: 1.05s;
  --anim-dur: 1050ms
}
.animate[data-animation-delay="1050"] {
  animation-delay: 1.05s
}
.animate[data-animation-duration="1100"] {
  animation-duration: 1.1s;
  --anim-dur: 1100ms
}
.animate[data-animation-delay="1100"] {
  animation-delay: 1.1s
}
.animate[data-animation-duration="1150"] {
  animation-duration: 1.15s;
  --anim-dur: 1150ms
}
.animate[data-animation-delay="1150"] {
  animation-delay: 1.15s
}
.animate[data-animation-duration="1200"] {
  animation-duration: 1.2s;
  --anim-dur: 1200ms
}
.animate[data-animation-delay="1200"] {
  animation-delay: 1.2s
}
.animate[data-animation-duration="1250"] {
  animation-duration: 1.25s;
  --anim-dur: 1250ms
}
.animate[data-animation-delay="1250"] {
  animation-delay: 1.25s
}
.animate[data-animation-duration="1300"] {
  animation-duration: 1.3s;
  --anim-dur: 1300ms
}
.animate[data-animation-delay="1300"] {
  animation-delay: 1.3s
}
.animate[data-animation-duration="1350"] {
  animation-duration: 1.35s;
  --anim-dur: 1350ms
}
.animate[data-animation-delay="1350"] {
  animation-delay: 1.35s
}
.animate[data-animation-duration="1400"] {
  animation-duration: 1.4s;
  --anim-dur: 1400ms
}
.animate[data-animation-delay="1400"] {
  animation-delay: 1.4s
}
.animate[data-animation-duration="1450"] {
  animation-duration: 1.45s;
  --anim-dur: 1450ms
}
.animate[data-animation-delay="1450"] {
  animation-delay: 1.45s
}
.animate[data-animation-duration="1500"] {
  animation-duration: 1.5s;
  --anim-dur: 1500ms
}
.animate[data-animation-delay="1500"] {
  animation-delay: 1.5s
}
.animate[data-animation-duration="1550"] {
  animation-duration: 1.55s;
  --anim-dur: 1550ms
}
.animate[data-animation-delay="1550"] {
  animation-delay: 1.55s
}
.animate[data-animation-duration="1600"] {
  animation-duration: 1.6s;
  --anim-dur: 1600ms
}
.animate[data-animation-delay="1600"] {
  animation-delay: 1.6s
}
.animate[data-animation-duration="1650"] {
  animation-duration: 1.65s;
  --anim-dur: 1650ms
}
.animate[data-animation-delay="1650"] {
  animation-delay: 1.65s
}
.animate[data-animation-duration="1700"] {
  animation-duration: 1.7s;
  --anim-dur: 1700ms
}
.animate[data-animation-delay="1700"] {
  animation-delay: 1.7s
}
.animate[data-animation-duration="1750"] {
  animation-duration: 1.75s;
  --anim-dur: 1750ms
}
.animate[data-animation-delay="1750"] {
  animation-delay: 1.75s
}
.animate[data-animation-duration="1800"] {
  animation-duration: 1.8s;
  --anim-dur: 1800ms
}
.animate[data-animation-delay="1800"] {
  animation-delay: 1.8s
}
.animate[data-animation-duration="1850"] {
  animation-duration: 1.85s;
  --anim-dur: 1850ms
}
.animate[data-animation-delay="1850"] {
  animation-delay: 1.85s
}
.animate[data-animation-duration="1900"] {
  animation-duration: 1.9s;
  --anim-dur: 1900ms
}
.animate[data-animation-delay="1900"] {
  animation-delay: 1.9s
}
.animate[data-animation-duration="1950"] {
  animation-duration: 1.95s;
  --anim-dur: 1950ms
}
.animate[data-animation-delay="1950"] {
  animation-delay: 1.95s
}
.animate[data-animation-duration="2000"] {
  animation-duration: 2s;
  --anim-dur: 2000ms
}
.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(calc(-3rem * var(--dir)))
  }
  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;
  inset: 0;
  transform: translateX(calc(-100% * var(--dir)));
  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(calc(100% * var(--dir)))
  }
}
[v-clock] {
  opacity: 0!important
}
body:has(.popover-modal:popover-open) {
  overflow: hidden
}
.card-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sm-1)
}
.card__image-box .skeleton-box {
  aspect-ratio: 1/1;
  height: auto
}
.card__body {
  padding: var(--sm-2)
}
@media (min-width:768px) {
  .card-container {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (min-width:992px) {
  .card-container {
    grid-template-columns: repeat(3,1fr)
  }
}