.metrics {
  background: var(--color-primary);
  color: white;
  margin-bottom: 10rem;
}

.metrics-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.metric-item{
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.metric-item h2 {
  font-size: var(--step-4);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.metric-item h3 {
  margin-bottom: 1rem;
}

.metric-item p {
  font-size: var(--step--1);
  opacity: 0.9;
}

@media (max-width: 768px) {
    .metrics-content {
    flex-direction: column;
    gap: 3rem;
  }

  .metric-item p{
    
    font-weight: 400;  
  }

  
}