@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-family-base);
  line-height:var(--line-height-base);
  color:var(--color-ink-900);
  background:var(--color-sand);
  font-size:var(--font-size-body);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--color-accent-400);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--color-accent-400-22);
}

h1,h2,h3{margin:0 0 var(--space-3) 0;letter-spacing:-.02em}

h1{font-size:var(--font-size-h1);line-height:1.05}
h2{font-size:var(--font-size-h2)}
h3{font-size:var(--font-size-h3)}

p{margin:0 0 var(--space-5) 0;color:var(--color-ink-700)}
small{color:var(--color-ink-700)}

.container{
  max-width:var(--layout-max);
  margin:0 auto;
  padding:0 var(--layout-gutter);
}

.section{padding:var(--layout-section-padding) 0}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.mt-7{margin-top:var(--space-7)}

.grid{
  display:grid;
  gap:var(--space-5);
}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

@media (max-width: 640px){
  h1{font-size:var(--font-size-h1-sm)}
  h2{font-size:var(--font-size-h2-sm)}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}