.course-details {
  $component-name: ".course-details";
  display: grid;
  grid-column-gap: spacing(0);
  grid-row-gap: spacing(0);

  &__column {
    @include content-container;

    @include breakpoint("wide") {
      &--data {
        justify-self: stretch;
        align-self: stretch;
        display: flex;
        justify-content: end;

        & > * {
          width: 100%;
        }
      }

      &--exam-details {
        align-self: stretch;
        display: flex;
        flex-direction: column;

        & > *:last-child {
          flex-grow: 1;
        }
      }
    }
  }

  &--exam {
    & + & {
      margin-top: spacing(1);
    }
  }

  @include breakpoint("wide") {
    grid-template-columns: 1fr 1fr;

    &--teaching,
    &--exam {
      grid-template-columns: minmax(20rem, $line-width-max) minmax(20rem, auto);
    }
  }
}