.hero{
  margin:clamp(1rem,4vw,2.5rem) auto;
  display:grid; 
  gap:1rem; 
  text-align:center;
  padding:clamp(1.25rem,4vw,2.5rem);
}
.hero h1{
  font-size:clamp(1.6rem,3.2vw,2.4rem); 
  margin:0
}

.hero .actions{
  display:flex; 
  gap:.75rem; 
  justify-content:center; 
  margin-top:.5rem; 
  flex-wrap:wrap
}

.features{
  margin-block:clamp(1rem,4vw,2.5rem);
  display:grid; 
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}

.features .post-card h3{
  margin:0 0 .35rem
}

.site-foot{
  padding:2rem 0; 
  border-top:1px solid var(--border); 
  margin-top:2rem
}

.site-foot .container{
  display:flex; 
  align-items:center; 
  justify-content:space-between
}