/* Brand Tiles — mobile-first scroll-snap + responsive grid */
:root{
  --brands-gap: clamp(12px, 2vw, 20px);
  --brand-tile-radius: var(--r-card);
  --brand-glass-bg: rgba(10,16,18,.42);
  --brand-glass-brd: rgba(255,255,255,.22);

  --brand-haval:#d33232; --brand-geely:#1d6aff; --brand-jac:#e41e26; --brand-lada:#0a5ee5;
}

/* MOBILE (default): горизонтальная лента */
.brand-tiles{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 14px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;

  padding: 0 12px 6px;
  margin: 0 -12px;
}
.brand-tiles::-webkit-scrollbar{ display:none; }
.brand-tile{ scroll-snap-align: start; list-style:none; }
.brand-tile__link{ display:block; border-radius: var(--brand-tile-radius); overflow: clip; position:relative; }

/* MEDIA ≥640px: сетка 2 колонки */
@media (min-width:640px){
  .brand-tiles{
    display:grid;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--brands-gap);
    overflow: visible;
    padding: 0; margin: 0;
  }
}

/* MEDIA ≥1024px: сетка 4 колонки */
@media (min-width:1024px){
  /* Автоматически подстраиваемся под количество тайлов (3 бренда — 3 колонки) */
  .brand-tiles{ grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); }
}

/* Контент плитки */
.brand-tile__media picture, .brand-tile__media img{ display:block; width:100%; height:auto; }
.brand-tile__gradient{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.45) 100%); }
.brand-tile__panel{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--brand-glass-bg) 100%, transparent);
  border:1px solid var(--brand-glass-brd);
  color:#fff;
}
.brand-tile__name{ font: 800 18px/1.2 system-ui, sans-serif; letter-spacing:-.01em; }
.brand-tile__badge{ display:inline-flex; align-items:center; gap:8px; font:600 12px/1 system-ui, sans-serif; opacity:.92; }
.brand-tile__dot{ inline-size:8px; block-size:8px; border-radius:50%; background: var(--accent,#0c7a43); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#0c7a43) 35%, transparent); }