/*-------------------------------------------------------------------------------
Counters
-------------------------------------------------------------------------------*/

.counters {
  margin: 20px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 0; /* space between rows */
}

.col-6 {
  flex: 0 0 50%; /* two per row */
  max-width: 50%;
}

.art-counter-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.art-counter-box {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

/* Number */
.art-counter-box h2 {
  font-size: 20px;
  margin: 0;
  color: var(--text-light);
}

/* Text */
.art-counter-box h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: lowercase; /* ✅ make text lowercase */
}

.art-counter-box span {
  color: var(--primary);
}

/* Responsive: stack counters on smaller screens */
@media (max-width: 600px) {
  .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}