.webform-submission-workshop-webform-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.webform-submission-workshop-webform-form legend {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* This form can render inside the "form-cards" component's wrapper
   (e.g. embedded via a Webform Block), which applies its own
   !important-heavy legend/span styling (14px, gray, tuned for its
   "pick one of several forms" cards) that otherwise wins over anything
   declared here - the .fieldset-legend span it targets directly always
   beats a plain "legend" rule regardless of specificity, since a direct
   match on the element itself always overrides an inherited value. Match
   its specificity (and !important) to reliably win instead. */
.c-form-cards__form-wrapper .webform-submission-workshop-webform-form fieldset:not(.webform-wizard-page) > legend {
  padding: 0 0 16px !important;
  margin-bottom: 16px !important;
}

.c-form-cards__form-wrapper .webform-submission-workshop-webform-form fieldset:not(.webform-wizard-page) legend span,
.webform-submission-workshop-webform-form legend .fieldset-legend {
  font-family: var(--font-family-heading, "Outfit", sans-serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--color-mmi-teal-deep, #218a9d) !important;
  letter-spacing: -0.3px !important;
}

fieldset.workshop-webform__personal-info > .fieldset-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}

fieldset.workshop-webform__personal-info .workshop-webform__full-row {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  fieldset.workshop-webform__personal-info > .fieldset-wrapper {
    grid-template-columns: 1fr;
  }
}