.hero {
  min-width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: clamp(0.3125rem, 2vw, 2rem);
  padding: clamp(0.3125rem, 2vw, 2rem);

  color: var(--color-text-on-dark);
  background-image: url("/images/Index-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
}

label[for="agreement"] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#agreement {
  flex-shrink: 0;
  margin-top: 3px;
}

.form-agreement label {
  display: inline;
}

@media (min-width: 1024px) {
  .hero {
    height: 500px;
  }
}