@media (max-width: 1200px) { :root { --space-3xl: 5.5rem; } }
@media (max-width: 992px) { :root { --space-3xl: 5rem; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { :root { --container-gutter: 20px; --space-3xl: 4rem; --space-2xl: 3rem; } .grid-3, .grid-2 { grid-template-columns: 1fr; } .header__inner { min-height: 84px; } .brand__logo { height: 62px; } .brand__company { font-size: .9rem; } .menu-toggle { display: block; width: 44px; height: 44px; } .site-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; gap: 0; padding: .5rem var(--container-gutter) 1.25rem; background: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .site-nav.is-open { display: grid; } .site-nav__link { min-height: 44px; border-bottom: 1px solid var(--color-border); } .site-nav__link::after { right: auto; width: 24px; } .header__cta { width: 100%; margin-top: .75rem; } .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 3.5rem; } .footer__brand { grid-column: 1 / -1; } .product-filter, .finder-options button { min-height: 44px; } .social-link { width: 44px; height: 44px; } }
@media (max-width: 576px) { :root { --container-gutter: 20px; --space-3xl: 3.5rem; } .grid-4 { grid-template-columns: 1fr; } .button { width: 100%; } .footer__main { grid-template-columns: 1fr; gap: 2.25rem; } .footer__brand { grid-column: auto; } .footer__bottom { align-items: flex-start; flex-direction: column; } }

@media (max-width: 1100px) and (min-width: 769px) { .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 3.5rem; } .footer__brand { grid-column: 1 / -1; } }