.brands-slide-top {
  display: flex;
  flex-direction: row;
  gap: var(--y-space-16);
}
.brands-slide-bottom {
  display: flex;
  flex-direction: row;
  gap: var(--y-space-16);
}
.brands-section,
.brands-slider {
  display: flex;
  flex-direction: column;
  gap: var(--y-space-20);
}

.brands-slider img {
  width: 184px;
  mix-blend-mode: multiply;
  filter: drop-shadow(1px 8px 5px var(--y-color-primary-contrast));
}
.brands-slider {
  max-width: 100%;
  overflow-x: hidden;
}
.dark-theme .brands-slider img {
  filter: invert(1) !important;
  mix-blend-mode: normal;
}
.brands-slider {
  padding-top: var(--y-space-16);
}

.brands-section p {
  color: var(--y-color-text);
  font-weight: var(--y-text-bold);
  font-size: var(--y-text-3xl);
}

@media (max-width: 767px) {
  .brands-section h2 {
    font-size: var(--y-text-2xl);
    margin-bottom: var(--y-space-12);
  }

  .brands-section p {
    font-size: var(--y-text-md);
    margin-bottom: var(--y-space-20);
  }

  .brands-slider {
    gap: var(--y-space-8);
  }

  .brands-slide-top,
  .brands-slide-bottom {
    gap: var(--y-space-8);
  }

  .brands-slider img {
    width: 120px;
  }
}

@media (max-width: 575px) {
  .brands-section h2 {
    font-size: var(--y-text-xl);
    margin-bottom: var(--y-space-8);
  }

  .brands-section p {
    font-size: var(--y-text-sm);
    margin-bottom: var(--y-space-16);
  }

  .brands-slider {
    gap: var(--y-space-28);
  }

  .brands-slide-top,
  .brands-slide-bottom {
    gap: var(--y-space-28);
    flex-wrap: wrap;
    justify-content: center;
  }

  .brands-slider img {
    width: 100px;
  }
}

@media (max-width: 375px) {
  .brands-slider img {
    width: 80px;
  }
}