:root{
--bp-mobile:390px;
--bp-tablet:1024px;
--bp-desktop:1440px;

--grid-cols-desktop:12; /* @kind other */
--grid-cols-tablet:8; /* @kind other */
--grid-cols-mobile:4; /* @kind other */
--grid-gutter-desktop:32px;
--grid-gutter-tablet:24px;
--grid-gutter-mobile:16px;
--margin-desktop:80px;
--margin-tablet:48px;
--margin-mobile:20px;

--content-max:1280px;
--content-max-narrow:880px;
--content-max-text:680px;
--nav-height:104px;
--nav-height-scrolled:80px;
--nav-height-mobile:64px;

--radius-none:0px;
--radius-xs:2px;
--radius-sm:3px;
--radius-pill:999px;

--btn-height:56px;
--btn-height-sm:44px;
--btn-height-mobile:52px;
--btn-pad-x:36px;
--btn-border-width:1px;

--ratio-hero:16/9; /* @kind other */
--ratio-pano:21/9; /* @kind other */
--ratio-cinema:2.39/1; /* @kind other */
--ratio-editorial:4/3; /* @kind other */
--ratio-portrait:3/4; /* @kind other */
--ratio-detail:1/1; /* @kind other */
--ratio-mobile-hero:4/5; /* @kind other */

--z-nav:100; /* @kind other */
--z-menu:200; /* @kind other */
--z-overlay:300; /* @kind other */
--z-lightbox:400; /* @kind other */
}