/* Supplied client logos, with a native scrolling fallback before enhancement. */
.brands > .section-wrapper--content {
  padding-top: var(--section-wrapper-block-gap);
}

.brands .es-client-logos {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  --es-logo-gap: 65px;
}

.brands .es-client-logos::-webkit-scrollbar { display: none; }
.brands .es-client-logos.is-ready { overflow: hidden; touch-action: pan-y pinch-zoom; }
.brands .es-client-logos.is-dragging { cursor: grabbing; user-select: none; }
.brands .es-client-logos:focus-visible { outline: 2px solid var(--es-surface-accent); outline-offset: -2px; }

.es-client-logos__track {
  display: flex;
  width: max-content;
  transition: none;
}

.es-client-logos:is(.is-moving, .is-dragging) .es-client-logos__track {
  will-change: transform;
}

.es-client-logos__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--es-logo-gap);
  padding-right: var(--es-logo-gap);
}

.es-client-logos__item {
  flex: 0 0 200px;
  width: 200px;
  height: 120px;
}

.es-client-logos__item img {
  display: block;
  width: 200px;
  height: 120px;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 767px) {
  .brands .es-client-logos { --es-logo-gap: 32px; }
  .es-client-logos__item { flex-basis: 150px; width: 150px; height: 90px; }
  .es-client-logos__item img { width: 150px; height: 90px; }
}