@media screen and (max-width: 768px) {
  /* 1. Reset standard wizard wrapper spaces */
  .webform-submission-form .webform-wizard-pages,
  .webform-submission-form .form-wrapper {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }

  /* 2. Force the banner container into a static, regular block flow */
  .webform-submission-form [data-drupal-selector="edit-processed-text-01"],
  .webform-submission-form .webform-element--processed-text-01 {
    position: relative !important;
    float: none !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 35px !important; /* This creates a solid physical gap underneath the image */
  }

  /* 3. Ensure the banner image itself behaves and auto-scales natively */
  .webform-submission-form .webform-element--processed-text-01 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
  }

  /* 4. Keep the first name element clear of any absolute positioning artifacts */
  .webform-submission-form .form-item-first-name {
    margin-top: 0px !important;
    clear: both !important;
  }
}