.banner-wrap {
    perspective: 600px;
    width: 100%;
    overflow: hidden;
    background-color: #ff9914;
  }
  .banner-flip {
    width: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  .banner-flip:hover {
    animation: flipYOnce 10s linear 1 ;
  }
  @keyframes flipYOnce {
    0%   { transform: rotateY(0deg); }
    25%  { transform: rotateY(10deg); }
    50%  { transform: rotateY(20deg); }
    75%  { transform: rotateY(30deg); }
    100%  { transform: rotateY(40deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .banner-flip,
    .banner-flip:hover {
      animation: none !important;
    }
  }