.page-wrapper {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.main.brands {
  background-color: #fff;
}

.section {
  margin-top: .5rem;
}

.section .nav-brands {
  grid-template-columns: repeat(var(--nb-gtc, 5), 1fr);
  gap: 1rem 0;
  display: grid;
}

@container app (width > 430px) {
  .section .nav-brands {
    --nb-gtc: 6;
  }
}

@container app (width > 520px) {
  .section .nav-brands {
    --nb-gtc: 7;
  }
}

@container app (width > 630px) {
  .section .nav-brands {
    --nb-gtc: 8;
  }
}

@container app (width > 680px) {
  .section .nav-brands {
    --nb-gtc: 9;
  }
}

.section .nav-brands .tile {
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.section .nav-brands .cover {
  object-fit: contain;
  aspect-ratio: 1;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  display: block;
}