.friends-section {
  padding: 5.2vw 0 5vw;
  overflow: hidden;
  background: #fafbfc;
  color: #1d2939;
  font-family: 'Geist', sans-serif;
}
.friends-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin: 0 5.5556% 3.4vw;
}
.friends-heading h2 {
  font: 500 clamp(36px, 3.3333vw, 96px)/1.1 'Schibsted Grotesk', sans-serif;
  letter-spacing: -.04em;
  margin: 0 0 .7vw;
  color: #1d2939;
}
.friends-heading p {
  font-size: clamp(16px, 1.1111vw, 32px);
  line-height: 1.4;
  color: #526075;
  margin: 0;
}
.friends-follow {
  display: inline-flex;
  align-items: center;
  gap: .5vw;
  font-size: clamp(16px, 1.1111vw, 32px);
  line-height: 1.4;
  color: #475467;
  white-space: nowrap;
}
.friends-follow img, .friend-x { width: 1.5vw; height: 1.5vw; min-width: 22px; min-height: 22px; }
.friends-follow-arrow { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.friends-window {
  display: grid;
  gap: .83vw;
  padding: 1px 0;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 95%, transparent);
}
.friends-track { display: flex; width: max-content; gap: .83vw; }
.friends-track-top { margin-left: -3.82vw; }
.friends-animated .friends-track {
  animation: friends-drift 140s linear infinite;
  will-change: transform;
}
.friends-animated .friends-track-bottom { animation-direction: reverse; }
@keyframes friends-drift {
  to { transform: translateX(calc(-50% - .415vw)); }
}
.friends-offscreen .friends-track,
.friends-window:hover .friends-track,
.friends-window:focus-within .friends-track { animation-play-state: paused; }
.friend-card {
  flex: 0 0 33.61vw;
  width: 33.61vw;
  min-height: 11.8vw;
  padding: 1.15vw;
  border: 1px solid #eef0f3;
  border-radius: .6vw;
  background: #f7f9fa;
}
.friend-card header { display: flex; align-items: center; gap: .6vw; margin-bottom: .4vw; }
.friend-card h3 {
  font: 500 clamp(17px, 1.25vw, 36px)/1.4 'Geist', sans-serif;
  color: #182230;
  letter-spacing: -.02em;
  margin: 0;
}
.friend-card header p { margin: .2vw 0 0; color: #475467; font-size: clamp(13px, .9722vw, 28px); line-height: 1.4; }
.friend-x { margin-left: auto; }
.friend-card blockquote {
  margin: 0;
  color: #717d94;
  font-size: clamp(14px, 1.0417vw, 30px);
  line-height: 1.4;
  letter-spacing: -.01em;
}
/* Portraits use the supplied reference as a sprite, without altering the source image. */
.friend-avatar {
  flex: 0 0 2.78vw;
  width: 2.78vw;
  height: 2.78vw;
  border-radius: 50%;
  background-image: url('assets/testimonial-reference.png');
  background-size: 101.6686vw 44.1821vw;
}
.avatar-john { background-position: -32.3175vw -15.985vw; }
.avatar-emily { background-position: -67.3654vw -15.985vw; }
.avatar-sarah { background-position: -1.291vw -28.6936vw; }
.avatar-david { background-position: -36.2889vw -28.6936vw; }
.avatar-rachel { background-position: -71.3368vw -28.6936vw; }
.avatar-jane { background: #e4e9ef; display: grid; place-items: center; font-size: 1vw; color: #475467; }
@media (max-width: 900px) {
  .friends-section { padding: 64px 0; }
  .friends-heading { margin: 0 24px 40px; }
  .friends-heading h2 { margin-bottom: 12px; }
  .friends-window { overflow-x: auto; gap: 12px; mask-image: none; -webkit-mask-image: none; padding: 0 24px; }
  .friends-track { gap: 12px; }
  .friends-animated .friends-window { overflow: hidden; }
  .friends-animated .friends-track { animation-duration: 110s; }
  @keyframes friends-drift { to { transform: translateX(calc(-50% - 6px)); } }
  .friends-track-top { margin-left: 0; }
  .friend-card { flex-basis: 340px; width: 340px; min-height: 210px; padding: 18px; border-radius: 10px; }
  .friend-card header { gap: 10px; margin-bottom: 12px; }
  .friend-avatar { flex-basis: 40px; width: 40px; height: 40px; background-size: 1462.857px 635.714px; }
  .avatar-john { background-position: -465px -230px; }
  .avatar-emily { background-position: -969.286px -230px; }
  .avatar-sarah { background-position: -18.571px -412.857px; }
  .avatar-david { background-position: -522.143px -412.857px; }
  .avatar-rachel { background-position: -1026.429px -412.857px; }
  .avatar-jane { font-size: 14px; }
}
@media (max-width: 600px) {
  .friends-heading { align-items: flex-start; flex-direction: column; }
  .friends-follow { gap: 8px; }
  .friend-card { flex-basis: min(340px, 82vw); width: min(340px, 82vw); }
}