.sub-brand {
  width: 100%;
}
.sub-brand-center {
  width: var(--max-width);
  margin: 0 auto;
  padding: 4rem var(--root-padding-x);
  display: flex;
  justify-content: center;
}
.brand-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  --md-col-size: 2;
  --lg-col-size: 2;
}
@media (min-width: 768px) {
  .brand-list {
    grid-template-columns: repeat(var(--md-col-size, 2), 1fr);
  }
}
@media (min-width: 1024px) {
  .brand-list {
    grid-template-columns: repeat(var(--lg-col-size, 2), 1fr);
  }
}
.brand-list .brand-item .link {
  display: block;
  width: 100%;
}
.brand-list .brand-item .img {
  width: 100%;
  height: 8.5rem;
  border: 1px solid #dadada;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.brand-list .brand-item .img img {
  max-width: 100%;
  max-height: 100%;
}
.brand-list .brand-item .name {
  font-size: 0.85rem;
  font-weight: 400;
  color: #444;
  text-align: center;
  width: 100%;
  display: block;
  margin-top: 1.1rem;
}