/* ==========================================================================
   Blok: offerteformulier. Maat voor maat uit het prototype (sectie 11): zwarte sectie,
   links kop + punten + belnummer (5 kolommen), rechts het witte formulierpaneel (7 kolommen).
   ========================================================================== */

.block-quote-form {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.block-quote-form__grid {
  display: grid;
  row-gap: var(--sp-10);
}

.block-quote-form__points {
  margin-top: var(--sp-8);
  color: var(--color-silver);
}

.block-quote-form__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.block-quote-form__points li:not(:last-child) {
  margin-bottom: var(--sp-3);
}

.block-quote-form__points .icon {
  width: var(--sp-5);
  height: var(--sp-5);
  margin-top: var(--sp-0-5);
  color: var(--color-primary);
}

.block-quote-form__call-label {
  margin-top: var(--sp-10);
  color: var(--color-silver);
}

.block-quote-form__intro .btn {
  margin-top: var(--sp-3);
}

.block-quote-form__panel {
  padding: var(--sp-5);
  background: var(--color-white);
  color: var(--color-black);
  --text-primary: var(--color-black);
  --text-secondary: var(--color-gray);
  --color-focus: var(--color-black);
}

@media (min-width: 40em) {
  .block-quote-form__panel {
    padding: var(--sp-8);
  }
}

@media (min-width: 64em) {
  .block-quote-form__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }

  .block-quote-form__intro {
    grid-column: span 5;
  }

  .block-quote-form__panel {
    grid-column: span 7;
    padding: var(--sp-10);
  }
}

@media (min-width: 90em) {
  .block-quote-form__grid {
    column-gap: var(--sp-12);
  }
}