/* Brand gallery based on the supplied reference, only in the proposal. */
.sx-brands {
  padding: 44px 32px 52px;
  background-color: #f2f3f3;
  background-image: radial-gradient(circle, transparent 2.6px, rgba(56, 73, 79, .06) 3px, rgba(56, 73, 79, .06) 3.8px, transparent 4.3px);
  background-size: 12px 12px;
  scroll-margin-top: 84px;
}

.sx-brands-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.sx-brands-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 32px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  color: #0268fe;
}

.sx-brands-title svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #172528;
}

.sx-brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 40px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sx-brand-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 112px;
}

.sx-brand-grid img {
  display: block;
  width: 210px;
  max-width: 100%;
  height: 112px;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .sx-brands { scroll-margin-top: 72px; }
  .sx-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 600px) {
  .sx-brands { padding: 32px 20px 40px; }
  .sx-brands-title { font-size: 25px; margin-bottom: 24px; }
  .sx-brands-title svg { width: 26px; height: 26px; }
  .sx-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .sx-brand-grid li, .sx-brand-grid img { height: 88px; }
  .sx-brand-grid img { width: 160px; }
  .sx-brand-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}