.mga-booking-app {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.mga-booking-app :where(h1, h2, p, strong, small, span, em),
.mga-booking-header > div,
.mga-step,
.mga-type-list,
.mga-type-copy,
.mga-type-meta,
.mga-scheduler,
.mga-slot-panel,
.mga-form-grid,
.mga-summary {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mga-booking-header h1 {
  font-size: 64px;
}

.mga-step-heading h2,
.mga-success h2 {
  font-size: 46px;
}

@media (max-width: 760px) {
  .mga-booking-app {
    max-width: 100%;
    margin-inline: 0;
  }

  .mga-booking-header h1 {
    font-size: 36px;
  }

  .mga-step-heading h2,
  .mga-success h2 {
    font-size: 30px;
  }

  .mga-booking-header p,
  .mga-success p {
    font-size: 16px;
  }

  .mga-type-copy strong {
    font-size: 21px;
  }
}

@media (max-width: 380px) {
  .mga-booking-app {
    padding-inline: 14px;
  }

  .mga-booking-header h1 {
    font-size: 32px;
  }

  .mga-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}