@media (min-width: 450px) and (max-width: 960px) {

  /* Step 1 */
  .b4-bit-form .b4-2  { grid-area: 1/1/88/61; }      /* Voornaam */

  .b4-bit-form .b4-13 { grid-area: 88/1/172/20; }    /* Tussenvoegsel */
  .b4-bit-form .b4-6  { grid-area: 88/21/175/61; }   /* Achternaam */

  .b4-bit-form .b4-14 { grid-area: 175/1/259/37; }   /* Geboortedatum */
  .b4-bit-form .b4-15 { grid-area: 175/38/247/61; }  /* Aanhef - widened for both radios */

  .b4-bit-form .b4-17 { grid-area: 259/2/288/21; }   /* "Adresgegevens" - widened, was 3 lines */
  .b4-bit-form .b4-16 { grid-area: 259/21/290/61; }  /* its rule */

  .b4-bit-form .b4-20 { grid-area: 290/1/374/61; }   /* Straatnaam */

  .b4-bit-form .b4-21 { grid-area: 374/1/458/18; }   /* Huisnummer - widened for its label */
  .b4-bit-form .b4-22 { grid-area: 374/19/458/61; }  /* Postcode */

  .b4-bit-form .b4-18 { grid-area: 458/2/487/32; }   /* "Contact & Legitimatie" - widened */
  .b4-bit-form .b4-19 { grid-area: 458/27/489/61; }  /* its rule */

  .b4-bit-form .b4-5  { grid-area: 489/1/576/31; }   /* Email */
  .b4-bit-form .b4-9  { grid-area: 489/32/576/61; }  /* Telefoonnummer */

  .b4-bit-form .b4-23 { grid-area: 576/1/660/61; }   /* Kopie identiteitsbewijs */
  .b4-bit-form .b4-11 { grid-area: 660/1/705/61; }   /* Spreekuur checkbox */
  .b4-bit-form .b4-12 { grid-area: 705/1/730/61; }   /* Privacy checkbox */

  /* Step 2 */
  .b4-bit-form .b4-24 { grid-area: 1/1/85/61; }      /* Ingangsdatum */
  .b4-bit-form .b4-25 { grid-area: 85/1/190/61; }
  .b4-bit-form .b4-26 { grid-area: 190/2/219/32; }   /* heading - widened to match step 1 */
  .b4-bit-form .b4-27 { grid-area: 190/27/221/61; }  /* its rule */
  .b4-bit-form .b4-28 { grid-area: 221/1/326/61; }   /* Betaalmethode */
  .b4-bit-form .b4-29 { grid-area: 326/1/410/61; }   /* IBAN */
  .b4-bit-form .b4-30 { grid-area: 410/1/494/61; }   /* Ten name van */

  /* Step 3 - all full width already, listed so the file is the whole story */
  .b4-bit-form .b4-34 { grid-area: 1/1/75/61; }
  .b4-bit-form .b4-32 { grid-area: 75/1/138/61; }
  .b4-bit-form .b4-33 { grid-area: 138/1/183/61; }
  .b4-bit-form .b4-1  { grid-area: 183/1/243/61; }
}


/* SECTION BREAKS
   Bit Form leaves no gap at all between field rows. Measured on the live page,
   every gap is 0 - the air you see is padding inside each field wrapper. So a
   section heading sits flush against the row above it and reads as part of it.

   This gives each heading room above. Nothing is added below, on purpose: the
   heading should sit close to the fields it introduces and far from the ones
   it does not.

   The heading AND its rule both get the margin. If only the heading got it,
   the row would grow but the line would stay at the old height, and the two
   would no longer sit level.

   It stops at 960px, so your monitor layout in Bit Form is untouched. Delete
   the media query to apply it there too. Change 2rem in one place to tune it;
   a whole field row is about 5.4rem. */

@media (max-width: 960px) {
  .b4-bit-form .b4-17,   /* Adresgegevens */
  .b4-bit-form .b4-16,   /* its rule */
  .b4-bit-form .b4-18,   /* Contact & Legitimatie */
  .b4-bit-form .b4-19,   /* its rule */
  .b4-bit-form .b4-26,   /* Betaalgegevens, step 2 */
  .b4-bit-form .b4-27 {  /* its rule */
    margin-block-start: 2rem;
  }
}


.b4-bit-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 0;
}

.b4-bit-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}


@media (max-width: 449px) {

  /* Step 1 */
  .b4-bit-form .b4-2  { grid-area: 1/1/88/61; }      /* Voornaam */

  .b4-bit-form .b4-13 { grid-area: 88/1/172/25; }    /* Tussenvoegsel */
  .b4-bit-form .b4-6  { grid-area: 88/26/175/61; }   /* Achternaam */

  .b4-bit-form .b4-14 { grid-area: 175/1/259/61; }   /* Geboortedatum */
  .b4-bit-form .b4-15 { grid-area: 259/1/331/61; }   /* Aanhef */

  .b4-bit-form .b4-17 { grid-area: 331/2/360/38; }   /* Adresgegevens */
  .b4-bit-form .b4-16 { grid-area: 331/31/362/61; }  /* its rule */

  .b4-bit-form .b4-20 { grid-area: 362/1/446/61; }   /* Straatnaam */

  .b4-bit-form .b4-21 { grid-area: 446/1/530/24; }   /* Huisnummer */
  .b4-bit-form .b4-22 { grid-area: 446/25/530/61; }  /* Postcode */

  .b4-bit-form .b4-18 { grid-area: 530/2/559/47; }   /* Contact & Legitimatie */
  .b4-bit-form .b4-19 { grid-area: 530/41/561/61; }  /* its rule */

  .b4-bit-form .b4-5  { grid-area: 561/1/648/31; }   /* Email */
  .b4-bit-form .b4-9  { grid-area: 561/32/648/61; }  /* Telefoonnummer */

  .b4-bit-form .b4-23 { grid-area: 648/1/732/61; }   /* Kopie identiteitsbewijs */
  .b4-bit-form .b4-11 { grid-area: 732/1/777/61; }   /* Spreekuur checkbox */
  .b4-bit-form .b4-12 { grid-area: 777/1/802/61; }   /* Privacy checkbox */

  /* Step 2 */
  .b4-bit-form .b4-24 { grid-area: 1/1/85/61; }
  .b4-bit-form .b4-25 { grid-area: 85/1/190/61; }
  .b4-bit-form .b4-26 { grid-area: 190/2/219/32; }   /* Betaalgegevens */
  .b4-bit-form .b4-27 { grid-area: 190/32/221/61; }  /* its rule */
  .b4-bit-form .b4-28 { grid-area: 221/1/326/61; }
  .b4-bit-form .b4-29 { grid-area: 326/1/410/61; }
  .b4-bit-form .b4-30 { grid-area: 410/1/494/61; }

  /* Step 3 */
  .b4-bit-form .b4-34 { grid-area: 1/1/75/61; }
  .b4-bit-form .b4-32 { grid-area: 75/1/138/61; }
  .b4-bit-form .b4-33 { grid-area: 138/1/183/61; }
  .b4-bit-form .b4-1  { grid-area: 183/1/243/61; }
}

@media (max-width: 449px) {
  .b4-bit-form ._frm-b4-stp-hdr-wrpr {
    flex-wrap: nowrap;
  }

  .b4-bit-form ._frm-b4-stp-hdr {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .b4-bit-form ._frm-b4-stp-hdr-lbl {
    font-size: 0.8rem;
    line-height: 1.25;
  }
}