/* section layout */
#clients{
  --gap: clamp(3rem, 6vw, 7rem);
  --speed: 20s;

  display: grid;
  /* grid-template-columns: clamp(220px, 24vw, 360px) 1fr; */
  align-items: center;
  justify-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: 3rem 1rem;
  background:#111;
  color:#fff;
  
  margin-top: 0;
}

/* heading at the left, centered vertically with logos */
.clients-title{
  margin:0;
  margin-bottom: 2rem;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height:1.1;
  font-weight:400;
  text-transform: uppercase;
  letter-spacing:.5px;
}

/* ticker */
.logos{
  overflow:hidden;
  position:relative;
  /* fade edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.logos .inner{
  display:flex;
  align-items:center;
  gap: var(--gap);
  width: max-content;
  animation: scroll var(--speed) linear infinite;
}
.logos:hover .inner{ animation-play-state: paused; }

.logos img{
  height: clamp(36px, 6vw, 72px);
  object-fit: contain;
  opacity:.8;
  filter: grayscale(100%) contrast(1.1) brightness(.95);
  mix-blend-mode: screen;           /* helps hide white boxes on dark bg */
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.logos img:hover{
  opacity:1;
  filter:none;
  transform: scale(1.06);
}

@keyframes scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* works because we duplicated content */
}

/* stack on small screens */
@media (max-width: 720px){
  #clients{ grid-template-columns: 1fr; }
  .clients-title{ text-align:center; margin-bottom:1rem; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .logos .inner{ animation: none; }
}

@media (min-width: 721px){
  #clients { overflow-x: hidden; }
}