.page {
  max-width: inherit;
  .l-container-padding(@page-padding-ver, @page-padding-hoz);

  &.has-bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }

  &__header.has-bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
  }
  &__header-inner {
    .l-container-padding(@page-header-padding-ver, @page-header-padding-hoz);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    @media (min-width: @device-width-medium) {
      flex-direction: row;
    }
    @media (max-width: 447px) {
      padding-top: 4rem;
    }
  }

  &__header {
    color: @secondary-color-inverted;
    background-color: @secondary-color;

    &-inner {
      align-items: center;
    }
    &__course-title {
      .page-subtitle;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    &__text, &__graphic {
      width: 100%;
      &-inner {
        margin-bottom: 1rem;
        padding: 0;
      }

        @media (min-width: @device-width-medium) {
          width: 50%;
        }
    }

    &__graphic-inner {
        margin-left: 0.5rem;
    }

    &__text-inner {
        margin-right: 0.5rem;
    }
  }

  &__title {
    margin-bottom: @page-title-margin;
    .page-title;
    position: relative;
    &.has-audio {
      .page__title-inner {
        margin-right: @icon-size;
      }
    }
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 50%;
    }
  }

  &__subtitle {
    margin-bottom: @page-subtitle-margin;
    .page-subtitle;
  }

  &__body {
    margin-bottom: @page-body-margin;
    .page-body;
  }

  &__instruction {
    margin-bottom: @page-instruction-margin;
    .page-instruction;
  }

  &__body a,
  &__instruction a {
    .link-text;
  }
}
