.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.brand-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.brand-card { text-align: center; }
.brand-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  background: color-mix(in srgb, var(--brand) 28%, #12161d);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
}
.brand-hero {
  background: radial-gradient(circle at top, color-mix(in srgb, var(--brand) 18%, transparent), transparent 55%);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

@media (max-width: 700px) {
  .split { grid-template-columns: 1fr; }
}