.hero-section {
  background-color: var(--color-neutral-100);
}

.tools-section img {
  max-width: 100%;
  height: auto;
}

.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}

.cta-section {
  background-color: var(--color-neutral-200);
}

@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
  }

  .hero-content,
  .cta-content {
    width: 100%;
    padding-right: 0;
  }

  .hero-image,
  .cta-image {
    width: 100%;
    margin-top: var(--space-4);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}