.social-slider {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.social-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding: 4px 0 12px;
  animation: social-scroll 64s linear infinite;
}

.social-track .post {
  width: min(330px, 78vw);
  flex: none;
  box-shadow: 0 16px 38px rgba(13, 27, 42, .12);
}

.social-track .post img {
  transition: transform .5s ease;
}

.social-track .post:hover img {
  transform: scale(1.045);
}

.social-slider:hover .social-track {
  animation-play-state: paused;
}

@keyframes social-scroll {
  to { transform: translateX(calc(-50% - 8px)); }
}

@media (max-width: 640px) {
  .social-slider {
    width: calc(100% + 14px);
    mask-image: linear-gradient(to right, #000 94%, transparent);
  }

  .social-track {
    gap: 12px;
    animation-duration: 52s;
  }

  .social-track .post {
    width: min(78vw, 310px);
    height: 350px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-track {
    animation: none;
  }
}