/* ============================================================
   sections/brands/mobile.css
   Mobile styles for: brands-section, brands-marquee,
   brand-logo-card, brands-heading
   ============================================================ */

/* ── 900px: Heading full width ── */
@media (max-width: 900px) {
    .brands-heading { padding: 0 24px; }
    .brands-heading > div { max-width: 100%; }
    .brands-heading .section-description { max-width: 100%; }
}

/* ── 768px: Smaller cards ── */
@media (max-width: 768px) {
    .brands-section { padding: 40px 0 32px; }
    .brands-shell { gap: 20px; }
    .brands-marquee { gap: 8px; }
    .brands-track { gap: 8px; }
    .brand-logo-card {
        height: 50px; width: 124px;
        min-width: 124px; max-width: 124px; border-radius: 6px;
    }
    .brand-logo-card img { max-height: 32px; max-width: 96px; }
    .brands-heading .section-title { font-size: 1.5rem; }
    .brands-heading .section-description { font-size: 0.78rem; }
}

/* ── 480px: Compact marquee cards ── */
@media (max-width: 480px) {
    .brands-section { padding: 28px 0 24px; }
    .brands-heading { padding: 0 14px; }
    .brand-logo-card {
        height: 44px; width: 108px;
        min-width: 108px; max-width: 108px; padding: 6px 10px;
    }
    .brand-logo-card img { max-height: 28px; max-width: 80px; }
}