:root {
  --job-breaker-background-color: var(--color-midnight);
  --job-breaker-color: var(--color-white);
  --job-breaker-inner-max-width: 100rem;
  --job-breaker-field-button-height: 7.8rem;

  @include use-responsive-sizing(--job-breaker-padding-block, responsive-map(xs 3rem, xl 5rem));
  @include use-responsive-sizing(--job-breaker-padding-inline, responsive-map(xs 2rem, xl 5rem));
}

.job-breaker {
  background-color: var(--job-breaker-background-color);
  color: var(--job-breaker-color);
  padding-block: var(--job-breaker-padding-block);
  padding-inline: var(--job-breaker-padding-inline);
  text-align: center;
}

.job-breaker__headline {
  margin-block-end: var(--job-breaker-padding-block);
}

.job-breaker__form {
  display: flex;
  flex-wrap: wrap;
  margin-inline: auto;
  max-inline-size: var(--job-breaker-inner-max-width);
  text-align: start;

  @include use-responsive-sizing(column-gap, $gaps);
  @include use-responsive-sizing(row-gap, responsive-map(xs 1.5rem, xl 3rem));
}

.job-breaker__field {
  --large-input-height: var(--job-breaker-field-button-height);

  flex-basis: 25%;
  flex-grow: 1;
  min-inline-size: 30rem;
}

.job-breaker__button {
  --button-width: 100%;
  --button-height: var(--job-breaker-field-button-height);

  flex-basis: 15%;
  flex-grow: 1;
  flex-shrink: 0;
  min-inline-size: 24rem;
}