.people-in-need-stat {
  position: relative;
}

.people-in-need-icon {
  display: block;
  width: 78px;
  height: 58px;
  margin: -66px 0 8px;
  background: var(--blue);
  -webkit-mask: url("ui/people-in-need-transparent.png") center / contain no-repeat;
  mask: url("ui/people-in-need-transparent.png") center / contain no-repeat;
}

.people-displaced-stat {
  position: relative;
}

.people-displaced-icon {
  display: block;
  width: 78px;
  height: 58px;
  margin: -66px 0 8px;
  background: var(--blue);
  -webkit-mask: url("ui/people-displaced-transparent.png") center / contain no-repeat;
  mask: url("ui/people-displaced-transparent.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 2px rgba(21, 43, 54, .28));
}

.tracked-events-stat {
  position: relative;
}

.tracked-events-icon {
  display: block;
  position: relative;
  width: 78px;
  height: 58px;
  margin: -66px 0 8px;
}

.tracked-events-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--blue);
  -webkit-mask: url("vendor/leaflet/images/marker-icon-2x.png") center / auto 58px no-repeat;
  mask: url("vendor/leaflet/images/marker-icon-2x.png") center / auto 58px no-repeat;
}

.tracked-events-icon i {
  position: absolute;
  z-index: 2;
  top: 9px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.tracked-events-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 28px;
  height: 7px;
  border-radius: 50%;
  background: rgba(21, 43, 54, .28);
  filter: blur(2px);
  transform: translateX(-50%);
}

.refugee-camps-stat {
  position: relative;
}

.refugee-camps-icon {
  display: block;
  width: 78px;
  height: 58px;
  margin: -66px 0 8px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath fill='black' d='M7 52 29 18l8 12L48 9l41 43H69L48 27 31 52H7Zm31 0 10-17 14 17H38ZM4 57h88v5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cpath fill='black' d='M7 52 29 18l8 12L48 9l41 43H69L48 27 31 52H7Zm31 0 10-17 14 17H38ZM4 57h88v5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.locations-in-need-stat {
  position: relative;
}

.locations-in-need-icon {
  display: block;
  position: relative;
  width: 78px;
  height: 58px;
  margin: -66px 0 8px;
  filter: drop-shadow(0 4px 2px rgba(21, 43, 54, .28));
}

.locations-in-need-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  -webkit-mask: url("ui/locations-globe-pins-transparent.png") center / contain no-repeat;
  mask: url("ui/locations-globe-pins-transparent.png") center / contain no-repeat;
}

.locations-in-need-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 58'%3E%3Cpath fill='black' d='M20 0C12 0 7 5 7 12c0 9 13 21 13 21s13-12 13-21C33 5 28 0 20 0Zm40 3c-7 0-11 4-11 10 0 8 11 18 11 18s11-10 11-18c0-6-4-10-11-10ZM44 18c-8 0-13 5-13 12 0 9 13 21 13 21s13-12 13-21c0-7-5-12-13-12Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 58'%3E%3Cpath fill='black' d='M20 0C12 0 7 5 7 12c0 9 13 21 13 21s13-12 13-21C33 5 28 0 20 0Zm40 3c-7 0-11 4-11 10 0 8 11 18 11 18s11-10 11-18c0-6-4-10-11-10ZM44 18c-8 0-13 5-13 12 0 9 13 21 13 21s13-12 13-21c0-7-5-12-13-12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.locations-in-need-icon i {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle 4px at 20px 10px, #fff 96%, transparent 100%),
    radial-gradient(circle 3px at 60px 11px, #fff 96%, transparent 100%),
    radial-gradient(circle 4px at 44px 29px, #fff 96%, transparent 100%);
}

/* Keep every front-page icon centred inside its own established container. */
.stats [role="img"],
.stats img,
#updateCards .event-icon,
#updateCards .event-icon img,
#updateCards .affected-stat-icon,
.topbar .brand-mark,
.world-map .worldsaid-leaflet-icon {
  justify-self: center;
  align-self: center;
}

.stats [role="img"] {
  justify-self: start;
  align-self: start;
}

.stats .gas-meter-count {
  min-width: 3.8ch;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .015em;
  will-change: contents;
}

.stats .gas-meter-count.count-complete {
  animation: gas-meter-settle .24s ease-out;
}

@keyframes gas-meter-settle {
  0% { transform: translateY(-2px); opacity: .82; }
  100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stats .gas-meter-count.count-complete { animation: none; }
}

#updateCards .event-icon,
#updateCards .affected-stat-icon,
.topbar .brand-mark {
  display: grid;
  place-items: center;
}

#updateCards .event-icon img,
#updateCards .affected-stat-icon svg {
  margin: auto;
}

@media (max-width: 800px) {
  .people-in-need-icon,
  .people-displaced-icon,
  .tracked-events-icon,
  .refugee-camps-icon,
  .locations-in-need-icon {
    margin-top: 0;
  }
}