/* STATS */
#stats{
  padding:40px 0 54px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:start;
  gap:16px;
  margin-top:38px;
}

/* CIRCLE */
.stat{
  width:min(100%, 230px);
  justify-self:center;
  aspect-ratio:1;
  border:1px solid rgba(31,47,140,.22);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:20px 14px 18px;
  background:radial-gradient(circle at 30% 25%, #fff 0%, #fafafa 65%, #f3f4f6 100%);
  box-shadow:0 8px 20px rgba(16,23,52,.06);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.stat:hover{
  border-color:#1f2f8c;
  transform:translateY(-4px);
  box-shadow:0 14px 26px rgba(16,23,52,.14);
}

/* NUMBER */
.stat__val{
  font-size:clamp(34px, 2.9vw, 52px);
  font-weight:800;
  color:#1f2f8c;
  line-height:1;
}

.stat__val--small{
  font-size:clamp(24px, 2vw, 34px);
  line-height:1.1;
}

/* TEXT */
.stat__lbl{
  margin-top:8px;
  font-size:clamp(11px, .95vw, 14px);
  line-height:1.25;
  color:#4f5663;
  max-width:88%;
}

.stat--dense .stat__lbl{
  margin-top:6px;
  font-size:10px;
  line-height:1.16;
  max-width:92%;
}

/* RESPONSIVE */
@media(max-width:1200px){
  .stats{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
  }

  .stat{
    width:min(100%, 240px);
  }
}

@media(max-width:820px){
  .stats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  .stat{
    width:min(100%, 230px);
  }
}

@media(max-width:520px){
  #stats{
    padding:30px 0 40px;
  }

  .stats{
    grid-template-columns:1fr;
    margin-top:24px;
    gap:14px;
  }

  .stat{
    width:min(100%, 280px);
    padding:22px 18px;
  }

  .stat__val{
    font-size:40px;
  }

  .stat__val--small{
    font-size:30px;
  }

  .stat__lbl{
    font-size:12px;
  }
}