.hero {
  padding: var(--spacing-12) var(--spacing-4);
  gap: var(--spacing-8);
  align-items: center;
}

.hero img {
  max-width: 50%;
}

.section {
  padding: var(--spacing-12) var(--spacing-4);
}

.grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-6);
}