.stat-cards {
  display: flex;
}

.stat-cards .stat-cards-grid {
  display: flex;
  flex: 1;
  gap: 20px;
}

.stat-cards .stat-card {
  --stat-card-bg: #f2f5f8;
  --stat-card-accent: #0061af;
  --stat-card-hover-border: var(--stat-card-accent);

  background: var(--stat-card-bg);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 20px 35px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 4px rgb(0 0 0 / 5%);
  transform: scale(1);
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
  will-change: transform;
}

.stat-cards .stat-card>div:first-child {
  margin: 0 0 8px;
  color: var(--stat-card-accent);
  font-size: 24px;
  line-height: 1.6;
  font-weight: 800;
}

.stat-cards .stat-card>div:last-child {
  color: #000;
}

.stat-cards .stat-card>div:last-child> :first-child {
  margin-top: 0;
}

.stat-cards .stat-card>div:last-child> :last-child {
  margin-bottom: 0;
}

.stat-cards .stat-card>div:last-child p {
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 0.875rem;
  line-height: 1.75;
  font-weight: 500;
  color: #000;
}

.stat-cards .stat-card>div:last-child strong,
.stat-cards .stat-card>div:last-child h3,
.stat-cards .stat-card>div:last-child h5 {
  display: block;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 0.875rem;
  line-height: 1.75;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

/* Brand/background variants from body-level theme class */
.theme-frosted-flakes .stat-cards .stat-card {
  --stat-card-bg: #eaf6ff;
  --stat-card-accent: #0061af;
}

.theme-special-k .stat-cards .stat-card {
  --stat-card-bg: #FFF5F7;
  --stat-card-accent: #ED1941;
}

.theme-raisin-bran .stat-cards .stat-card {
  --stat-card-bg: #EEEAED;
  --stat-card-accent: #64154C;
}

@media (width >=768px) {
  .stat-cards .stat-cards-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 21px;
  }

  .stat-cards .stat-card {
    flex: 0 1 calc((100% - 21px) / 2);
    max-width: calc((100% - 21px) / 2);
    min-height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

@media (width >=1200px) {
  .stat-cards .stat-cards-grid {
    justify-content: center;
  }

  .stat-cards .stat-card {
    flex: 0 1 calc((100% - 63px) / 4);
    max-width: calc((100% - 63px) / 4);
  }
}

@media screen and (width <= 767px) {
  .stat-cards .stat-cards-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
    padding: 0 1rem;
  }

  .stat-cards .stat-card {
    border: 1px solid #DDD;
    flex: 1;
    max-width: 100%;
    min-height: 160px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
  }

  .theme-frosted-flakes .stat-cards .stat-card {
    --stat-card-bg: #FFF;
  }

  .theme-special-k .stat-cards .stat-card {
    --stat-card-bg: #FFF;
  }

  .theme-raisin-bran .stat-cards .stat-card {
    --stat-card-bg: #FFF;
  }
}

.stat-card p {
  text-wrap: balance;
}

/* Handle multi-line titles authored as separate paragraphs */

.stat-cards .stat-card > div:first-child p {
  margin-block: 0;
}