.nav-marcas {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nav-marcas[data-columnas="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.nav-marcas[data-columnas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-marcas[data-columnas="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nav-marcas[data-columnas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nav-marcas[data-columnas="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nav-marcas[data-columnas="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.nav-marcas > [data-marca-id] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 105px;
  height: 70px;
}

.nav-marcas__item {
  display: block;
  width: 105px;
  height: 70px;
  overflow: visible;
}

.nav-marcas__item img {
  display: block;
  width: 105px;
  height: 88px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.nav-marcas__item:hover img,
.nav-marcas.is-filtering [data-marca-id].is-activa .nav-marcas__item img {
  transform: scale(1.09);
}

.nav-marcas.is-filtering .nav-marcas__item img {
  filter: grayscale(100%);
  opacity: 0.45;
}

.nav-marcas.is-filtering [data-marca-id].is-activa .nav-marcas__item img {
  filter: none;
  opacity: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nav-marcas > [data-marca-id],
  .nav-marcas__item,
  .nav-marcas__item img {
    width: 90px;
    height: 60px;
  }
}

@media (max-width: 767px) {
  .nav-marcas,
  .nav-marcas[data-columnas="1"],
  .nav-marcas[data-columnas="2"],
  .nav-marcas[data-columnas="3"],
  .nav-marcas[data-columnas="4"],
  .nav-marcas[data-columnas="5"],
  .nav-marcas[data-columnas="6"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .nav-marcas > [data-marca-id],
  .nav-marcas__item {
    width: 100%;
    height: 60px;
  }

  .nav-marcas__item img {
    width: 100%;
    height: 60px;
  }
}