.clients-carousel{position:relative}

.clients-shell{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}

.clients-viewport{
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:4px 2px 18px;
  scroll-snap-type:x mandatory;
}
.clients-viewport::-webkit-scrollbar{display:none}

.clients-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 64px) / 5);
  gap:16px;
  align-items:stretch;
}

.client-logo{
  aspect-ratio:1 / 1;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--cream2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-shadow:0 10px 34px rgba(0,0,0,.05);
  scroll-snap-align:start;
  transition:.25s ease;
}
.client-logo:hover{
  transform:translateY(-4px);
  border-color:rgba(200,169,90,.55);
  box-shadow:var(--shadow2);
}
.client-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.72;
  transition:.25s ease;
}
.client-logo:hover img{
  filter:grayscale(0);
  opacity:1;
}

.clients-arrow{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(200,169,90,.46);
  background:#fff;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:.25s ease;
  font-size:24px;
  line-height:1;
}
.clients-arrow:hover{
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-2px);
}

@media(max-width:720px){
  .clients-shell{gap:10px}
  .clients-track{
    grid-auto-columns:150px;
    gap:14px;
  }
  .clients-arrow{
    flex-basis:42px;
    width:42px;
    height:42px;
    font-size:22px;
  }
  .client-logo{
    border-radius:20px;
    padding:18px;
  }
}