.tgwv-stat-box {
  --tgwv-stat-box-primary: #198754;
  --tgwv-stat-box-label: #333333;
  --tgwv-stat-box-gap: 60px;
  --tgwv-stat-box-item-min-width: 130px;
  --tgwv-stat-box-align: center;
  --tgwv-stat-box-cols-lg: 4;
  --tgwv-stat-box-cols-md: var(--tgwv-stat-box-cols-lg, 4);
  --tgwv-stat-box-cols-sm: var(--tgwv-stat-box-cols-md, var(--tgwv-stat-box-cols-lg, 4));

  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--tgwv-stat-box-cols-lg, 4), minmax(0, 1fr));
  gap: var(--tgwv-stat-box-gap);
  justify-items: center;
  align-items: start;
}

.tgwv-stat-box[style*="--tgwv-stat-box-align:left"] {
  justify-items: start;
}

.tgwv-stat-box[style*="--tgwv-stat-box-align:right"] {
  justify-items: end;
}

.tgwv-stat-box[style*="--tgwv-stat-box-align:center"] {
  justify-items: center;
}

.tgwv-stat-box__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
}

.tgwv-stat-box__number {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--tgwv-stat-box-primary);
  line-height: 1;
}

.tgwv-stat-box__prefix {
  margin-right: 2px;
}

.tgwv-stat-box__suffix {
  font-size: 0.75em;
  font-weight: 700;
  margin-left: 2px;
}

.tgwv-stat-box__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tgwv-stat-box-label);
  margin-top: 10px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.tgwv-stat-box--uppercase-label .tgwv-stat-box__label {
  text-transform: uppercase;
}

.tgwv-stat-box__divider {
  width: 35px;
  height: 2px;
  background-color: var(--tgwv-stat-box-primary);
  margin: 0 auto;
  transition: width 0.3s ease;
}

.tgwv-stat-box__item:hover .tgwv-stat-box__divider {
  width: 55px;
}

.tgwv-stat-box--no-divider-hover .tgwv-stat-box__item:hover .tgwv-stat-box__divider {
  width: 35px;
}

@media (max-width: 991px) {
  .tgwv-stat-box {
    grid-template-columns: repeat(var(--tgwv-stat-box-cols-md, var(--tgwv-stat-box-cols-lg, 4)), minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .tgwv-stat-box {
    grid-template-columns: repeat(var(--tgwv-stat-box-cols-sm, var(--tgwv-stat-box-cols-md, var(--tgwv-stat-box-cols-lg, 4))), minmax(0, 1fr));
    gap: min(var(--tgwv-stat-box-gap), 40px);
  }
}
