*{box-sizing:border-box}
html{background:var(--surface-page)}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--type-body);
  word-break:keep-all;          
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text-link);text-decoration:none;transition:var(--motion-hover)}
a:hover{opacity:1}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-heading);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
p,ul,ol{margin:0}
li{list-style:none}
strong{font-weight:var(--fw-strong)}
::selection{background:var(--selection-bg);color:var(--selection-text)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
input,select,textarea{font-size:16px;font-family:var(--font-body);border:var(--border-form);border-radius:var(--radius-none);background:var(--surface-page);color:var(--text-body);min-height:var(--control-h)}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}   
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}