.card-list
  flex: 1
  &.has-scroll
    max-height: 25.5rem
    overflow-y: auto
    +position(relative)
  .completed-practices-progress + &
    border-top: solid 1px var(--border-tint)
  .side-tabs-contents__item &
    +media-breakpoint-up(md)
      max-height: calc(100vh - 6rem)
      overflow-y: auto

.card-list__description
  padding: .75rem 1rem
  background-color: var(--background)

.card-list__message
  padding-block: 2rem

.card-list__deacription
  padding: .75rem 1rem
  p
    +text-block(.8125rem 1.6)
    +media-breakpoint-down(sm)
      font-size: .75rem

.card-list__notice
  border: solid 1px var(--success)
  background-color: var(--success-tint)
  padding: .75rem 1rem
  color: var(--success-text)
  +media-breakpoint-down(sm)
    padding: .5rem .75rem
  a
    color: inherit
    +hover-link-reversal

.card-list__label
  +text-block(.75rem 1.4, 700)
  +position(sticky, top 0, 2)
  background-color: var(--background)
  +media-breakpoint-up(md)
    padding: .25rem 1rem
  +media-breakpoint-down(sm)
    padding: .25rem .75rem
  &:first-child
    border-top: solid 1px var(--border)

.card-list__items
  .card-list__deacription + &
    border-top: dotted .0625rem var(--border-tint)
  &.is-md-only-2-items
    +media-breakpoint-only(md)
      display: flex
      flex-wrap: wrap
      .card-list-item
        flex: 0 0 50%
        &:nth-child(odd)
          border-right: solid 1px var(--border-tint)
