@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap');

:root{
  --paper:#ffffff;
  --heading:#5a7793;
  --ring:#eef1f3;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#14171a;
    --heading:#9dc0da;
    --ring:#22272b;
  }
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--paper);
  font-family:'Nunito', ui-sans-serif, system-ui, sans-serif;
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(64px,11vw,120px) clamp(24px,6vw,64px) clamp(72px,12vw,140px);
}

h1.tagline{
  margin:0 auto clamp(56px,9vw,96px);
  max-width:52ch;
  text-align:center;
  color:var(--heading);
  font-weight:400;
  font-size:clamp(24px,3.4vw,34px);
  line-height:1.5;
  letter-spacing:.005em;
  text-wrap:balance;
}

.circles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,240px));
  justify-content:center;
  align-items:start;
  gap:clamp(20px,4vw,48px);
}

.circle{
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:var(--ring);
}

.circle img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (prefers-reduced-motion:no-preference){
  .circle img{
    transition:transform .5s ease;
  }
  .circle:hover img{
    transform:scale(1.06);
  }
}

@media (max-width:720px){
  .circles{
    grid-template-columns:repeat(2, minmax(0,220px));
    row-gap:clamp(28px,7vw,40px);
  }
}