.article-sidebar {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 1fr 400px;
  align-items: start;
  @media (max-width: 1680px) {
    grid-gap: 40px;
    grid-template-columns: 1fr 370px;
  }
  @media (max-width: 1440px) {
    grid-gap: 30px;
    grid-template-columns: 1fr 350px;
  }
  @media (max-width: 1280px) {
    grid-gap: 30px;
    grid-template-columns: 1fr 320px;
  }
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
  article {
    * {
      transition: all 0.3s ease-in-out;
    }
    .categories {
      h4 {
        display: flex;
        flex-wrap: wrap;
        row-gap: 4px;
        margin: 0 0 1em;
        a {
          color: var(--c-gray-500);
          line-height: 1;
          &:hover {
            color: var(--c-primary-200);
          }
        }
        span {
          display: block;
          width: 1px;
          margin: 0 10px;
          background-color: var(--c-gray-500);
        }
      }
    }
    h1 {
      margin: 0 0 0.6em;
    }
    .author-date {
      display: flex;
      gap: 20px;
      margin-bottom: 1em;
      font-size: var(--fs-sm);
      @media (max-width: 768px) {
        flex-direction: column;
        gap: 0;
      }
      date {
        position: relative;
        text-align: right;
        white-space: nowrap;
        @media (max-width: 768px) {
          text-align: left;
        }
        &:before {
          display: block;
          position: absolute;
          content: '';
          width: 6px;
          height: 6px;
          top: 7px;
          left: -14px;
          background-color: var(--c-gray-500);
          @media (max-width: 768px) {
            display: none;
          }
        }
      }
    }
    .text {
      margin-bottom: 2em;
    }
    .post-footer {
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.4em;
      .download {
        a {
          display: flex;
          align-items: center;
          gap: 4px;
          &:hover {
            span {
              svg {
                path {
                  fill: var(--c-gray-500);
                }
              }
            }
            strong {
              color: var(--c-gray-500);
            }
          }
        }
      }
    }
    .featured-image {
      a {
        display: block;
        img {
          width: 100%;
        }
      }
    }
  }
  aside {
    .basic-articles {
      grid-template-columns: 1fr;
      @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 576px) {
        grid-template-columns: 1fr;
      }
    }
  }
}