.hero-section {
  background-color: var(--color-neutral-100);
  padding: var(--spacing-12) 0;

}

.hero-section h1 {
  margin-bottom: var(--spacing-4);
}

.hero-section img {
  margin-top: var(--spacing-6);
  border-radius: var(--radius-lg);
}

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

.vehicle-category img {
  margin-bottom: var(--spacing-4);
  border-radius: var(--radius-md);
}

.features-section {
  padding: var(--spacing-12) 0;
  background-color: var(--color-neutral-100);
}

.features-section h2 {
  text-align: center;
  margin-bottom: var(--spacing-8);
}

.feature-item {
  text-align: center;
}

@media (max-width: 768px) {
  .hero-section {
    padding: var(--spacing-8) 0;
  }

  .vehicles-section, .features-section {
    padding: var(--spacing-8) 0;
  }

  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
}