.inclua-diagnostic-final {
  & .inclua-diagnostic-final__grid {
    @media (max-width: 64rem) {
      grid-template-columns: minmax(0, 1fr);
    }

    @media (max-width: 45rem) {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-8);
      min-width: 0;
      max-width: 100%;
      width: 100%;
    }
  }

  @media (max-width: 45rem) {
    padding: var(--spacing-10) 0 var(--spacing-8);
  }

  & .inclua-container {
    @media (max-width: 45rem) {
      width: min(36.25rem, calc(100% - (var(--layout-gutter) * 2)));
    }
  }
}

.inclua-nav {
  @media (max-width: 45rem) {
    display: none;
  }
}

.inclua-page-banner {
  @media (max-width: 45rem) {
    & .inclua-breadcrumb {
      display: none;
    }
  }
}

.inclua-diagnostic-welcome {
  @media (max-width: 45rem) {
    padding: var(--spacing-8) 0;
  }
}

.inclua-diagnostic-start {
  @media (max-width: 45rem) {
    padding: var(--spacing-8) 0;
  }

  & .inclua-diagnostic-start__form {
    @media (max-width: 45rem) {
      & .inclua-button {
        width: 100%;
      }
    }
  }
}

.inclua-diagnostic-actions {
  @media (max-width: 45rem) {
    align-items: stretch;
    flex-direction: column;

    & .inclua-button {
      width: 100%;
    }
  }
}

.inclua-diagnostic-fields {
  @media (max-width: 45rem) {
    display: flex;
    flex-direction: column;

    & .inclua-input,
    & .inclua-select {
      width: 100%;
    }
  }
}

.inclua-diagnostic-field-service,
.inclua-diagnostic-field-culture {
  @media (max-width: 45rem) {
    width: 100%;
  }
}

.inclua-diagnostic-questionnaire {
  @media (max-width: 45rem) {
    margin-top: 0;
    order: 1;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

.inclua-diagnostic-panel {
  @media (max-width: 45rem) {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

.inclua-diagnostic-questions {
  @media (max-width: 45rem) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
}

.inclua-diagnostic-question {
  @media (max-width: 45rem) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  & .inclua-diagnostic-question__text {
    @media (max-width: 45rem) {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
    }
  }

  & .inclua-diagnostic-question__child {
    &.is-visible {
      @media (max-width: 45rem) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }
    }
  }
}

.inclua-diagnostic-sidebar {
  @media (max-width: 45rem) {
    order: 2;
  }
}

.inclua-diagnostic-card {
  @media (max-width: 45rem) {
    padding: var(--spacing-7) var(--spacing-4) var(--spacing-5);
  }
}

.inclua-diagnostic-context {
  & .inclua-diagnostic-context__value {
    @media (max-width: 45rem) {
      overflow-wrap: anywhere;
    }
  }
}

.inclua-diagnostic-footer-nav {
  @media (max-width: 45rem) {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-4);
    margin-top: var(--spacing-5);
  }

  & .inclua-diagnostic-footer-nav__left,
  & .inclua-diagnostic-footer-nav__right {
    @media (max-width: 45rem) {
      flex-direction: row;
    }
  }
}

.inclua-diagnostic-save-later {
  @media (max-width: 45rem) {
    min-width: 0;
    width: 13rem;
  }

  @media (max-width: 26.25rem) {
    flex: 1 1 auto;
    width: auto;
  }
}

.inclua-radio-options--diagnostic {
  @media (max-width: 45rem) {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  & .inclua-radio-option,
  & .inclua-radio-option span {
    @media (max-width: 45rem) {
      min-width: 0;
      width: 100%;
    }
  }

  & .inclua-radio-option--wide {
    @media (max-width: 45rem) {
      grid-column: 1 / -1;
    }
  }
}

.inclua-radio-options--scale {
  @media (max-width: 45rem) {
    gap: var(--spacing-2);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  & .inclua-radio-option span {
    @media (max-width: 45rem) {
      justify-content: center;
      padding-inline: var(--spacing-2);
    }
  }
}