@layer atoms {
  .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 1000ms ease-in both;
    }
  }
  @media not (prefers-reduced-motion: reduce) {
    .animate--fade-in-left {
      animation: fade-in-left 600ms ease-in both;
    }
  }
  @media not (prefers-reduced-motion: reduce) {
    .animate--fade-in-top {
      animation: fade-in-top 600ms ease-in both;
    }
  }
  .animate[data-animation-duration="0"] {
    animation-duration: 0ms;
    --anim-dur: 0ms;
  }
  .animate[data-animation-delay="0"] {
    animation-delay: 0ms;
  }
  .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: 100ms;
    --anim-dur: 100ms;
  }
  .animate[data-animation-delay="100"] {
    animation-delay: 100ms;
  }
  .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: 200ms;
    --anim-dur: 200ms;
  }
  .animate[data-animation-delay="200"] {
    animation-delay: 200ms;
  }
  .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: 300ms;
    --anim-dur: 300ms;
  }
  .animate[data-animation-delay="300"] {
    animation-delay: 300ms;
  }
  .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: 400ms;
    --anim-dur: 400ms;
  }
  .animate[data-animation-delay="400"] {
    animation-delay: 400ms;
  }
  .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: 500ms;
    --anim-dur: 500ms;
  }
  .animate[data-animation-delay="500"] {
    animation-delay: 500ms;
  }
  .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: 600ms;
    --anim-dur: 600ms;
  }
  .animate[data-animation-delay="600"] {
    animation-delay: 600ms;
  }
  .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: 700ms;
    --anim-dur: 700ms;
  }
  .animate[data-animation-delay="700"] {
    animation-delay: 700ms;
  }
  .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: 800ms;
    --anim-dur: 800ms;
  }
  .animate[data-animation-delay="800"] {
    animation-delay: 800ms;
  }
  .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: 900ms;
    --anim-dur: 900ms;
  }
  .animate[data-animation-delay="900"] {
    animation-delay: 900ms;
  }
  .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: 1000ms;
    --anim-dur: 1000ms;
  }
  .animate[data-animation-delay="1000"] {
    animation-delay: 1000ms;
  }
  .animate[data-animation-duration="1050"] {
    animation-duration: 1050ms;
    --anim-dur: 1050ms;
  }
  .animate[data-animation-delay="1050"] {
    animation-delay: 1050ms;
  }
  .animate[data-animation-duration="1100"] {
    animation-duration: 1100ms;
    --anim-dur: 1100ms;
  }
  .animate[data-animation-delay="1100"] {
    animation-delay: 1100ms;
  }
  .animate[data-animation-duration="1150"] {
    animation-duration: 1150ms;
    --anim-dur: 1150ms;
  }
  .animate[data-animation-delay="1150"] {
    animation-delay: 1150ms;
  }
  .animate[data-animation-duration="1200"] {
    animation-duration: 1200ms;
    --anim-dur: 1200ms;
  }
  .animate[data-animation-delay="1200"] {
    animation-delay: 1200ms;
  }
  .animate[data-animation-duration="1250"] {
    animation-duration: 1250ms;
    --anim-dur: 1250ms;
  }
  .animate[data-animation-delay="1250"] {
    animation-delay: 1250ms;
  }
  .animate[data-animation-duration="1300"] {
    animation-duration: 1300ms;
    --anim-dur: 1300ms;
  }
  .animate[data-animation-delay="1300"] {
    animation-delay: 1300ms;
  }
  .animate[data-animation-duration="1350"] {
    animation-duration: 1350ms;
    --anim-dur: 1350ms;
  }
  .animate[data-animation-delay="1350"] {
    animation-delay: 1350ms;
  }
  .animate[data-animation-duration="1400"] {
    animation-duration: 1400ms;
    --anim-dur: 1400ms;
  }
  .animate[data-animation-delay="1400"] {
    animation-delay: 1400ms;
  }
  .animate[data-animation-duration="1450"] {
    animation-duration: 1450ms;
    --anim-dur: 1450ms;
  }
  .animate[data-animation-delay="1450"] {
    animation-delay: 1450ms;
  }
  .animate[data-animation-duration="1500"] {
    animation-duration: 1500ms;
    --anim-dur: 1500ms;
  }
  .animate[data-animation-delay="1500"] {
    animation-delay: 1500ms;
  }
  .animate[data-animation-duration="1550"] {
    animation-duration: 1550ms;
    --anim-dur: 1550ms;
  }
  .animate[data-animation-delay="1550"] {
    animation-delay: 1550ms;
  }
  .animate[data-animation-duration="1600"] {
    animation-duration: 1600ms;
    --anim-dur: 1600ms;
  }
  .animate[data-animation-delay="1600"] {
    animation-delay: 1600ms;
  }
  .animate[data-animation-duration="1650"] {
    animation-duration: 1650ms;
    --anim-dur: 1650ms;
  }
  .animate[data-animation-delay="1650"] {
    animation-delay: 1650ms;
  }
  .animate[data-animation-duration="1700"] {
    animation-duration: 1700ms;
    --anim-dur: 1700ms;
  }
  .animate[data-animation-delay="1700"] {
    animation-delay: 1700ms;
  }
  .animate[data-animation-duration="1750"] {
    animation-duration: 1750ms;
    --anim-dur: 1750ms;
  }
  .animate[data-animation-delay="1750"] {
    animation-delay: 1750ms;
  }
  .animate[data-animation-duration="1800"] {
    animation-duration: 1800ms;
    --anim-dur: 1800ms;
  }
  .animate[data-animation-delay="1800"] {
    animation-delay: 1800ms;
  }
  .animate[data-animation-duration="1850"] {
    animation-duration: 1850ms;
    --anim-dur: 1850ms;
  }
  .animate[data-animation-delay="1850"] {
    animation-delay: 1850ms;
  }
  .animate[data-animation-duration="1900"] {
    animation-duration: 1900ms;
    --anim-dur: 1900ms;
  }
  .animate[data-animation-delay="1900"] {
    animation-delay: 1900ms;
  }
  .animate[data-animation-duration="1950"] {
    animation-duration: 1950ms;
    --anim-dur: 1950ms;
  }
  .animate[data-animation-delay="1950"] {
    animation-delay: 1950ms;
  }
  .animate[data-animation-duration="2000"] {
    animation-duration: 2000ms;
    --anim-dur: 2000ms;
  }
  .animate[data-animation-delay="2000"] {
    animation-delay: 2000ms;
  }
  @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-7);
  }
  .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, 0.2) 20%, rgba(255, 255, 255, 0.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);
    }
  }
  .animate:has(.panel-backdrop),
  .animate:has(.card-backdrop) {
    animation-fill-mode: backwards;
  }
}