/* ==================================================
   CONTACT

   Links de uitleg, rechts het formulier op een
   lichtgrijze kaart. Het formulier zelf is opgemaakt
   in global.css.
================================================== */

.contact__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--grid-gap);
}

.contact__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--content-gap);
}

.contact__content h1 {
  font-size: var(--h2);
}

.contact__lede {
  font-size: var(--text-lead);
}


/* opsomming met vinkjes */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-s);

  margin: 0;
  padding: 0;

  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;

  line-height: 1.25;
}

.checklist .icon {
  flex: none;

  width: 1.2em;
  height: 1.2em;
}


/* Google-score */

.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.rating__score {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;

  padding: 0.3em 0.6em;

  font-weight: 700;

  background-color: var(--secondary);
}


/* formulierkaart */

.contact__card {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}

.contact__card .form {
  margin-top: 0;
}

@media (max-width: 900px) {

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

}