.stats-section {
  position: relative;
}

.stats-visual {
  position: relative;
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding-top: 240px;
}

.stats-visual__circles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stats-visual__circle {
  position: absolute;
  top: 532px;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed var(--magenta-100);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stats-visual__circle--big {
  width: 1065px;
  height: 1065px;
}

.stats-visual__circle--small {
  width: 840px;
  height: 840px;
}

.stats-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--grey-100), transparent);
}

.stats-card {
  position: relative;
  z-index: 1;
  padding: var(--spacing-8);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  justify-content: center;
  gap: var(--spacing-11);
}

.stats-grid .stat {
  max-width: 150px;
}

.stat h3 {
  display: block;
  font-size: 48px;
  color: var(--teal-600);
  font-weight: 400;
}
.stat span {
  color: var(--grey-800);
  font-size: 16px;
}

.stats-visual__photo {
  position: absolute;
  z-index: 2;
  width: clamp(64px, 9vw, 100px);
  height: clamp(64px, 9vw, 100px);
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.stats-visual__photo img {
  object-fit: cover;
  display: block;
}

.stats-visual__photo--1 {
  left: 27%;
  top: 92px;
}

.stats-visual__photo--2 {
  left: 60%;
  top: 130px;
}

.stats-visual__photo--3 {
  left: 84%;
  top: 222px;
}

.stats-visual__dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal-vibrant);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.stats-visual__dot--1 {
  left: 14%;
  top: 264px;
}

.stats-visual__dot--2 {
  left: 39%;
  top: 136px;
}

.stats-visual__dot--3 {
  left: 51%;
  top: 0px;
}

.stats-visual__dot--4 {
  left: 74%;
  top: 98px;
}