.number-cards-container {
  display: flex;
  gap: 2rem;
  margin-top: 32px;
}

.number-card {
  overflow: hidden;
  background-color: var(--bg);
  border: 2px solid var(--bg-light);
  border-radius: 8px;
  box-shadow: var(--box-shadow-light);
  transition: box-shadow 0.3s ease;
  width: 100%;
  padding: 32px;
}

.number-card:hover {
  box-shadow: var(--box-shadow-medium);
}

.number-card span {
  font-size: 2.6rem;
  font-weight: medium;
  color: var(--theme-light);
}

.number-card h3 {
  margin-top: 18px;
}

.number-card p {
  margin-top: 8px;
  font-size: var(--font-small);
}

@media (max-width: 1024px) {
  .number-cards-container {
    flex-direction: column;
    align-items: start;
  }
}