.course {
  display: flex;
  flex-direction: column;
  padding: 100px 0 0 0;
  height: 100vh;

  .action-bar {
    margin-bottom: 20px;
    text-align: right;
    line-height: 1;
    color: var(--color-text-2);
    .xicon {
      display: initial;
    }
  }

  .thumbnail-timeline {
    flex: 1;
    position: relative;
    .thumbnail-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 100px;
      bottom: 0;
      overflow: hidden;
      > article {
        overflow-y: scroll;
        height: 100%;
        padding-right: 50px;
        margin-right: -50px;
        > section {
          padding-bottom: 40px;
          .time {
            padding-bottom: 10px;
            color: var(--color-text-2);
          }
          .statistic {
            padding-bottom: 10px;
            color: var(--color-text-3);
          }
          .grid {
            display: grid;
            grid-column-gap: 10px;
            grid-row-gap: 10px;

            .course-card {
              border-radius: 3px;
              .cover {
                height: 120px;
              }
              .mask {
                p {
                  font-size: 13px;
                }
              }
            }

            &.table {
              grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            }
            &.tab {
              grid-template-columns: 1fr;
              .course-card {
                border-radius: 3px;
                .cover {
                  height: 330px;
                }
                .mask {
                  p {
                    font-size: 15px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .timeline-container {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}