:root {
  --service-1: #fbf7ef;
  --service-2: #f0f3e9;
  --service-3: #f5eee5;
  --service-4: #edf1ef;
}

.service-card:nth-child(1) { background: var(--service-1); }
.service-card:nth-child(2) { background: var(--service-2); }
.service-card:nth-child(3) { background: var(--service-3); }
.service-card:nth-child(4) { background: var(--service-4); }
.service-card:hover { filter: brightness(.975); }

.hero-image {
  background-position: center;
  background-size: cover;
}

@media (max-width: 760px) {
  .hero-image {
    aspect-ratio: 1127 / 916;
    min-height: 0;
    background-position: center;
    background-size: cover;
  }
}