ul.ntl-infographic {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;

  --bg1: #fff;
  --blue: #3498db;
  --green: #2ecc71;
  --purple: #9b59b6;
  --gold: #f1c40f;
  --red: #e74c3c;
  --orange: #e67e22;
  --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f;
  --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022;
}

ul.ntl-infographic li {
  position: relative;
  width: 100%;
  min-width: 25em;
  max-width: min(35em, 100%);
  flex: 1;
  border-radius: 6.4px;
  padding: 6.4px;
  z-index: 1;
  transition: all 0.2s;
  cursor: pointer;
}

ul.ntl-infographic li .numberWrap {
  position: absolute;
}

ul.ntl-infographic li .number {
  font-size: 166.4px;
  font-weight: 900;
  width: 0.9em;
  line-height: 1;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul.ntl-infographic li .number {
  transition: color 0.5s ease-in-out; /* Smooth transition */
  color: #FEDCD3;
}

ul.ntl-infographic li .number.active {
  color: #FCAEAF;
}

ul.ntl-infographic li .coverWrap {
  transform: rotate(130deg);
  position: absolute;
  width: 18em;
  height: 15em;
  left: -3em;
  top: -1em;
}

ul.ntl-infographic li .coverWrap .numberCover {
  position: absolute;
  background: var(--bg1);
  width: 18em;
  height: 6em;
  border-radius: 50% 50% 0 0;
  border-bottom: 3px solid #f5f8f7;
  transition: all 0.4s;
}

ul.ntl-infographic li .coverWrap .numberCover::before {
  position: absolute;
  content: "";
  bottom: 5px;
  left: 4em;
  right: 4em;
  top: 5em;
  box-shadow: 0 0 30px 17px #48668577;
  border-radius: 100px / 10px;
  z-index: -1;
}

ul.ntl-infographic li .coverWrap .numberCover::after {
  position: absolute;
  bottom: 0;
  content: "";
  left: -10%;
  width: 120%;
  height: 150%;
  background: radial-gradient(
    at bottom,
    #48668533,
    transparent,
    transparent
  );
  z-index: 1;
}

ul.ntl-infographic li .content {
  margin: 8em 3em 1em 7em;
  position: relative;
}

ul.ntl-infographic li .content h2 {
  font-size: 1.7em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  /* text-transform: uppercase;*/
}

ul.ntl-infographic li .content p {
  line-height: 1.5em;
}

ul.ntl-infographic li:hover .coverWrap .numberCover {
  border-radius: 100%;
}

ul.ntl-infographic .ntl-infographic__icon, ul.ntl-infographic .content>svg {
  position: absolute;
  max-width: 32px;
  max-height: 32px;
  width: auto;
  text-align: center;
  top: -41.6px;
  left: 50%;
  transform: translatex(-50%);
  color: #666;
}