.course {
  &:not(:last-child) {
    margin-bottom: rem(20);
  }

  &__title {
    display: flex;
    font-weight: $font-weight-extrabold;
    margin-bottom: rem(20);

    .fi {
      margin-right: rem(10);
      margin-top: 2px;
    }
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    padding: 0 rem(20);

    > div {
      flex: 1 0 auto;
      padding-right: rem(20);
    }
  }

  &__progress,
  &__score {
    .label {
      margin-bottom: rem(10);
    }
  }

  &__status {
    display: flex;

    .state {
      margin-bottom: rem(20);
    }

    .status {
      display: block;
      font-weight: $font-weight-bold;
      text-align: center;
    }
  }

  .circle-progress {
    svg {
      height: rem(90);
      width: rem(90);
    }

    text {
      font-size: rem(20);
      font-weight: $font-weight-semibold;
      transform: translate(10px, 10px);
    }
  }

  &__time-spent,
  &__completed-on,
  &__badges-earned {
    display: flex;

    .inner {
      display: flex;
      flex-direction: column;
    }

    .value {
      font-size: rem(16);
      font-weight: $font-weight-bold;
      margin: auto 0;
    }
  }

  &__badges-earned {
    .value {
      text-align: center;
    }
  }
}
