.brand-list {
  grid-column: 2 / -2;
  padding: 0 20px;
}

  @media (min-width: 768px) {.brand-list {
    padding: 0
}
  }

.brand-list__title {
  font-size: var(--font-size-title-xl);
  font-weight: 700;
}

.brand-list__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 45px 30px;
}

@media (min-width: 768px) {

.brand-list__list {
    grid-template-columns: repeat(4, 1fr)
}
  }

.brand-list__list-item {
  width: 100%;
  overflow: hidden;
}

.brand-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.brand-card__link {
  text-decoration: none;
  color: var(--color-default);
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.brand-card__link:hover {
    opacity: 0.8;
  }

.brand-card__img-wrap {
  max-width: 70%;
  margin: 0 auto;
  display: flex;
  height: 120px;
  padding-bottom: 20px;
  align-content: center;
  justify-content: center;
}

.brand-card__img {
  object-fit: contain;
  width: 100%;
}

.brand-card__title {
  margin-top: auto;
  display: block;
  text-align: center;
}

.pagination {
  grid-column: 2 / -2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 55px;
}

@media (min-width: 768px) {

.pagination {
    grid-column: 4 / -4;
    padding: 0 0 90px
}
  }

.pagination__list {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination__item {
  margin-right: 24px;
}

.pagination__item:last-child {
    margin-right: 0;
  }

@media (min-width: 768px) {

.pagination__item {
    margin-right: 30px
}
  }

.pagination__link {
  font-size: var(--font-size-text-m);
  color: var(--color-primary-dark);
  opacity: 0.5;
  text-decoration: none;
  font-weight: 600;
}

.pagination__link:hover,
  .pagination__link.focus-visible:focus {
    color: var(--color-default);
    opacity: 1;
    transition: 0.2s ease-out;
  }

.pagination__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 20px;
  margin-left: 30px;
}

@media (min-width: 768px) {

.pagination__btn {
    width: 25px;
    margin-left: 40px
}
  }

.pagination__btn_prev {
  margin-left: 0;
  margin-right: 30px;
  transform: rotate(180deg);
}

@media (min-width: 768px) {

.pagination__btn_prev {
    margin-right: 40px
}
  }

.pagination__icon {
  opacity: 0.45;
}

.pagination__btn:hover > .pagination__icon,
.pagination__btn:focus > .pagination__icon {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.pagination__link_current {
  opacity: 1;
  color: var(--color-default);
  border-bottom: 2px solid var(--color-default);
}

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