/*--------------------------------------------------------------
# Mentions
--------------------------------------------------------------*/
.testimonials {
  background: var(--hero-gradient);
  padding: 40px 0 24px;
}

.testimonials .section-title h2 {
  color: var(--text-title);
}

.testimonials .mentions-list {
  overflow: visible;
  padding: 6px 0 18px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.testimonials .mentions-viewport {
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
}

.testimonials .mentions-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
  gap: 20px;
  padding-bottom: 10px;
}

.testimonials .mention-card {
  display: flex;
  height: auto;
}

.testimonials .mention-card > a {
  display: flex;
  width: 100%;
  text-decoration: none;
}

@supports (offset: shape(from 0 0, hline by 1px)) {
  .testimonials .mentions-viewport {
    overflow: hidden;
    --marquee-pad-x: 0px;
    --marquee-pad-y: 80px;
    --marquee-pad-bottom: 96px;
    padding: var(--marquee-pad-y) var(--marquee-pad-x) var(--marquee-pad-bottom);
    margin: calc(-1 * var(--marquee-pad-y)) calc(-1 * var(--marquee-pad-x))
      calc(-1 * var(--marquee-pad-bottom));
  }

  .testimonials .mentions-track {
    --s: 360px;
    --d: 56s;
    --n: 3;
    --gap: 18px;
    display: flex;
    overflow: hidden;
    gap: 0;
  }

  .testimonials .mention-card {
    flex: 0 0 auto;
    width: var(--s);
    offset: shape(
      from calc(var(--s) / -2) 50%,
      hline by calc(sibling-count() * (var(--s) + var(--gap)))
    );
    animation: mentions-scroll var(--d) linear infinite;
    animation-delay: calc(
      var(--drag-delay, 0s) + (-1 * sibling-index() * var(--d) / sibling-count())
    );
  }

  .testimonials .mention-card > a {
    width: 100%;
  }

  @keyframes mentions-scroll {
    to {
      offset-distance: 100%;
    }
  }
}

.testimonials .mentions-viewport.is-dragging {
  cursor: grabbing;
}

.testimonials .testimonial-item {
  box-sizing: border-box;
  text-align: left;
  background: linear-gradient(135deg, var(--mention-gradient-1) 0%, var(--mention-gradient-2) 60%, var(--mention-gradient-3) 100%);
  border-radius: 18px;
  padding: 21px 21px 18px;
  box-shadow: none;
  width: min(100%, 390px);
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 165px;
}

.testimonials .testimonial-item p {
  margin: 0;
  color: var(--mention-title);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
}

.testimonials .testimonial-item .mention-title {
  color: var(--mention-title);
}

.testimonials .testimonial-item h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 6px 0 0;
  color: var(--mention-source);
}

.testimonials .testimonial-item h4 {
  font-size: 13px;
  color: var(--mention-author);
  margin: 0;
}

.testimonials .testimonial-item .mention-source {
  margin-top: auto;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: var(--mention-quote);
  font-size: 18px;
}

.testimonials .testimonial-item .quote-icon-left {
  margin-right: 6px;
}

.testimonials .testimonial-item .quote-icon-right {
  margin-left: 6px;
}

.mentions-empty {
  margin: 20px auto 0;
  text-align: center;
  color: var(--text-body);
  font-size: 16px;
}

.mentions-empty[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .testimonials .testimonial-item {
    padding: 16px 16px 15px;
    border-radius: 15px;
  }

  .testimonials .testimonial-item p {
    font-size: 16px;
  }
}