.pp-marquee {
  overflow: hidden;
  visibility: hidden;
  --direction: 1;
  --speed: 50;
  --items-gap: 20px;
  --fields-layout: row;
  --fields-gap: 10px;
  --pause-on-hover: false;
}
.pp-marquee:hover .pp-marquee-animation {
  -webkit-animation-play-state: var(--poh, running) !important;
          animation-play-state: var(--poh, running) !important;
}
.pp-marquee .pp-marquee-img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}

@media (prefers-reduced-motion: reduce) {
  .pp-marquee .pp-marquee-animation {
    -webkit-animation: none !important;
            animation: none !important;
  }
}
.pp-marquee-vertical .pp-marquee-animation {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-animation: slidingY calc(var(--pp-est-speed, 10) * 1s * 50 / var(--speed)) linear infinite;
          animation: slidingY calc(var(--pp-est-speed, 10) * 1s * 50 / var(--speed)) linear infinite;
}
.pp-marquee-vertical .pp-marquee-item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.pp-marquee-vertical .pp-marquee-separator {
  display: block;
  -webkit-margin-before: var(--items-gap);
          margin-block-start: var(--items-gap);
  -webkit-margin-start: initial;
          margin-inline-start: initial;
}

.pp-marquee.showing {
  visibility: visible;
}

.pp-marquee-animation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: var(--items-gap);
  -webkit-animation: sliding calc(var(--pp-est-speed, 10) * 1s * 50 / var(--speed)) linear infinite;
          animation: sliding calc(var(--pp-est-speed, 10) * 1s * 50 / var(--speed)) linear infinite;
  -webkit-animation-play-state: var(--poh, paused);
          animation-play-state: var(--poh, paused);
}

.pp-marquee-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.pp-marquee-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: var(--fields-layout, row);
          flex-direction: var(--fields-layout, row);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--fields-gap, 10px);
  text-decoration: none;
}

.pp-marquee-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pp-marquee-text {
  -webkit-transition: all 0.3s cubic-bezier(0.33, 0, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.33, 0, 0.25, 1);
}

.pp-marquee-separator {
  display: inline-block;
  font-size: var(--separator-size, 0.8em);
  color: var(--separator-color);
  vertical-align: middle;
  -webkit-margin-start: var(--items-gap);
          margin-inline-start: var(--items-gap);
  -webkit-transition: all 0.3s cubic-bezier(0.33, 0, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.33, 0, 0.25, 1);
}
.pp-marquee-separator i {
  -webkit-transform: rotate(var(--separator-rotate, 0deg));
          transform: rotate(var(--separator-rotate, 0deg));
}
.pp-marquee-separator svg {
  height: var(--separator-size, auto);
  fill: var(--separator-color);
  -webkit-transform: rotate(var(--separator-rotate, 0deg));
          transform: rotate(var(--separator-rotate, 0deg));
}

.pp-marquee-separator-image {
  line-height: 0;
}
.pp-marquee-separator-image img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: var(--separator-size, auto);
  -webkit-transform: rotate(var(--separator-rotate, 0deg));
          transform: rotate(var(--separator-rotate, 0deg));
}

@-webkit-keyframes sliding {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
            transform: translateX(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
  }
}

@keyframes sliding {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
            transform: translateX(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
  }
}
@-webkit-keyframes slidingY {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
            transform: translateY(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
  }
}
@keyframes slidingY {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
            transform: translateY(calc(-1 * var(--direction, 1) * 100% / var(--total, 2)));
  }
}