.hero {
  text-align: center;
  padding: var(--space-12) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-8);
  padding: var(--space-12) 0;
}

.service-card {
  text-align: center;
}

.service-card img {
  margin: var(--space-4) 0;
  border-radius: var(--border-radius-lg);
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}