.sb-marcas{
  --sb-visible: 5;
  --sb-item-h: 110px;
  --sb-gap: 40px;
  --sb-escala: 1.35;
  --sb-shadow-x: 6px;
  --sb-shadow-y: 8px;
  --sb-shadow-blur: 3px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 20px 0;
  box-sizing: border-box;
  overflow: visible;
  clip-path: inset(-100px 0 -100px 0);
}

.sb-marcas-viewport{
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.sb-marcas-track{
  display: flex;
  align-items: center;
  gap: var(--sb-gap);
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.sb-slide{
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - (var(--sb-visible) - 1) * var(--sb-gap)) / var(--sb-visible));
  height: var(--sb-item-h);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s ease;
}

.sb-slide > img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .35s ease, opacity .35s ease;
  position: relative;
  z-index: 2;
}

.sb-slide .sb-slide-shadow{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 0;
  transform: translate(var(--sb-shadow-x), var(--sb-shadow-y));
  transition: opacity .35s ease;
  pointer-events: none;
}
.sb-slide .sb-slide-shadow > img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) blur(var(--sb-shadow-blur));
  opacity: 1;
}

.sb-slide.is-active{
  transform: scale(var(--sb-escala));
  z-index: 5;
}
.sb-slide.is-active > img{
  filter: grayscale(0);
  opacity: 1;
}
.sb-slide.is-active .sb-slide-shadow{
  opacity: .35;
}

.sb-marcas-arrow{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #333;
  opacity: .6;
  transition: opacity .2s ease, transform .2s ease;
  padding: 0;
  z-index: 6;
}
.sb-marcas-arrow:hover{ opacity: 1; transform: scale(1.1); }
.sb-marcas-arrow svg{ width: 26px; height: 26px; }

@media (max-width: 991px){
  .sb-marcas{ --sb-visible: 3; --sb-item-h: 72px; --sb-gap: 28px; }
}
@media (max-width: 575px){
  .sb-marcas{ --sb-visible: 3; --sb-item-h: 60px; --sb-gap: 16px; }
  .sb-marcas-arrow{ width: 34px; height: 34px; }
}