@keyframes banner-bell-shake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-18deg); }
  30% { transform: rotate(16deg); }
  45% { transform: rotate(-12deg); }
  60% { transform: rotate(10deg); }
  75% { transform: rotate(-6deg); }
}

.banner-bell-shake {
  animation: banner-bell-shake 0.8s ease-in-out 0s 2;
  transform-origin: top center;
}

.banner-slide {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.32s ease;
  will-change: transform, opacity;
}

.banner-slide--offscreen {
  transform: translate3d(115%, 0, 0);
  opacity: 0;
}

/* Mobile & Tablet: slide up from bottom */
@media (max-width: 1023px) {
  .banner-slide--offscreen {
    transform: translate3d(0, 115%, 0);
  }
}