:root{
--container-desktop:1170px; --safe-desktop:1110px; --col-desktop:65px;
--container-tablet:970px;   --safe-tablet:910px;   --col-tablet:48px;
--container-mobile:750px;   --safe-mobile:690px;   --col-mobile:30px;
--grid-columns:12; /* @kind other */
--grid-gutter:30px;
--z-base:0; /* @kind other */
--z-sticky:100; /* @kind other */
--z-dropdown:200; /* @kind other */
--z-overlay:300; /* @kind other */
--z-toast:400; /* @kind other */
}
.container{width:100%;margin-inline:auto;padding-inline:var(--grid-gutter)}
@media (min-width:320px){.container{max-width:304px}}   /* 2 columns */
@media (min-width:360px){.container{max-width:328px}}   /* 4 columns */
@media (min-width:768px){.container{max-width:736px}}   /* 6-12 columns */
@media (min-width:1024px){.container{max-width:960px}}  /* 12 columns */
@media (min-width:1366px){.container{max-width:1170px}} /* 12 columns */
@media (min-width:1440px){.container{max-width:1408px}} /* 12 columns */
@media (min-width:1920px){.container{max-width:1760px}} /* 12 columns */
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gutter)}
@media (max-width:1023px){.grid-12{grid-template-columns:repeat(6,1fr)}}
@media (max-width:767px){.grid-12{grid-template-columns:repeat(4,1fr)}}