body{
  font-family:Inter,Arial,sans-serif;
  margin:0;
  background:#fff;
  color:#111
}
.small-nav{
  font-size: 16px;
}
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:70px 8%;
  align-items:center
}
.globe{
  width:320px;
  height:320px;
  border:2px solid #cbd5e1;
  border-radius:50%;
  margin:auto;
  background:radial-gradient(circle,#fff,#eef)
}
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:40px 8%
}
article{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:20px;
  transition:.2s
}
article:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.08)
}
@media(max-width:800px){
  .hero{grid-template-columns:1fr}
}