html, body {
  scroll-padding-top: var(--300);
}
html:has(> .mobile), body:has(> .mobile) {
  scroll-padding-top: var(--50);
}

.brandsPage {
  --InLine:4;
  display: flex;
  flex-direction: column;
  gap: var(--MainGap);
  width: var(--1200);
  margin: 0 auto;
}
.brandsPage h1.title {
  text-align: center;
}
.brandsPage .alphabetMenu {
  display: flex;
  justify-content: center;
  gap: var(--30);
}
.brandsPage .alphabetMenu .item {
  display: inline-block;
  font-size: var(--16);
  line-height: var(--22);
  font-weight: 500;
}
.brandsPage .alphabetMenu .item.d {
  color: #D4D4D4;
  cursor: default;
}
.brandsPage .brands {
  display: flex;
  flex-direction: column;
  gap: var(--78);
}
.brandsPage .brands .list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}
.brandsPage .brands .list h2.title {
  flex: 0 0 100%;
  font-size: var(--32);
  font-weight: 400;
  line-height: var(--40);
  margin-bottom: var(--10);
}
.brandsPage .brands .list .item {
  flex: 0 0 calc(100% / var(--InLine));
}
.brandsPage .brands .list .item a {
  font-size: var(--16);
  font-weight: 400;
  line-height: var(--22);
  text-transform: uppercase;
}

.mobile .brandsPage {
  width: 100%;
  padding: 0 var(--20);
}
.mobile .brandsPage .alphabetMenu {
  justify-content: flex-start;
  overflow: auto;
  width: 100%;
  gap: var(--15);
  white-space: nowrap;
}
.mobile .brandsPage .brands {
  gap: var(--MainGap);
}
.mobile .brandsPage .brands .list {
  flex-wrap: nowrap;
  flex-direction: column;
}
.mobile .brandsPage .brands .list h2.title {
  margin: 0;
  font-size: var(--24);
  line-height: var(--30);
}
.mobile .brandsPage .brands .list .item {
  flex: none;
}

/*# sourceMappingURL=brands.css.map */