.page main.lessons-page {
  max-width: 101rem;
  padding-bottom: 8rem;
  font-family: $font-family-sans-serif;
  color: $brand-text--dark;
  font-size: 1.6rem;
  line-height: 2.2rem;

  div.course {
    .introduction {
      &:empty {
        display: none;
      }

      p {
        margin: 0 0 2rem 0;
      }
    }

    ul.lessons {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      margin: 0 0 0 -2rem;

      // each lesson card
      li.lesson {
        margin: 2rem 0 0 2rem;
        display: inline-block;
        width: 30rem;
        padding: 0;

        a {
          display: flex;
          flex-direction: column; // so <img> sticks to bottom
          height: 22rem;
          box-shadow: $button-area;
          background: white;
          color: inherit;
          text-decoration: none;
          border: 1px solid $item-border;
          border-radius: 5px;
          border-bottom-width: 0; // our lesson bottoms are <img>; hide the bottom border for nicer box-shadow
          overflow: hidden;
          transition: 0.05s transform ease-in-out;

          &:hover {
            box-shadow: $button-area--hover;
            transform: translateY(-3px);
          }

          h2 {
            font: inherit;
            font-weight: bold;
            margin: 0;
            padding: 2rem 2rem 0;
          }

          .description {
            flex: 1 1 auto;
            flex-direction: column;
            display: flex;
          }

          .description p {
            flex: 1 1 auto;
            margin: 0;
            padding: 1.5rem 2rem;
          }

          img {
            display: block;
            width: 100%;
            height: auto;
            flex: 0 0 auto;
          }
        }
      }
    }
  }
}
