.media-checklist {
  font-size: 13px;
  display: flex;
  color: $black-87;
  margin: 16px auto 0;
  width: 100%;
  padding: 32px 2% 80px;
  background-color: $black-02;
  max-width: 1000px;

  aside {
    padding: 0 32px 0 0;
    width: 260px;

    h3 {
      @extend .media__notes-heading;
      text-align: right;
      margin-top: 8px;
    }

    p {
      margin: 0 auto;
      text-align: right;
    }
  }

  ul {
    padding: 0;
    border-left: 1px solid $black-16;
  }

  li {
    padding: 8px 8px 8px 32px;
    margin: 0;
    list-style-position: outside;
  }

  h4 {
    background-color: transparent;
    font-weight: 700;
    color: $black-87;
    margin: 0;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
  }

  & > span {
    margin-left: 0;
    display: inline-block;

    &::before {
      content: ' – ';
    }
  }

  em {
    font-style: normal;
    font-family: Courier, Monaco, mono;
  }
}

.media-checklist {
  font-size: 13px;
  display: flex;
  color: $black-87;
  margin: 16px auto 0;
  width: 100%;
  padding: 32px 2% 80px;
  background-color: $black-02;
  max-width: 1000px;

  @media all and (max-width: 400px) {
    display: none;
  }

  aside {
    padding: 0 32px 0 0;
    width: 260px;

    h3 {
      @extend .media__notes-heading;
      text-align: right;
      margin-top: 8px;
    }

    p {
      margin: 0 auto;
      text-align: right;
    }
  }

  ul {
    padding: 0;
    border-left: 1px solid $black-16;
  }

  li {
    padding: 8px 8px 8px 32px;
    margin: 0;
    list-style-position: outside;
  }

  h4 {
    background-color: transparent;
    font-weight: 700;
    color: $black-87;
    margin: 0;
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
  }

  & > span {
    margin-left: 0;
    display: inline-block;

    &::before {
      content: ' – ';
    }
  }

  em {
    font-style: normal;
    font-family: Courier, Monaco, mono;
  }
}

Hide the checklist on small screens
Hide the checklist on small screens
