$article-image-size: 24px;

section.blog-recent {
  .header {
    display: flex;
    justify-content: space-between;

    .all-articles {
      display: flex;
      flex-direction: column;
      justify-content: center;

      a {
        text-decoration: none;

        &:after {
          content: "»";
        }
      }
    }
  }
}

section.blog-recent,
section.blog {
  .list {
    .blog-items {
      list-style: none;
      padding: 0;

      .blog-item {
        background-color: $background-lighter;
        border-radius: 16px;
        padding: 8px;
        display: flex;
        cursor: pointer;
        user-select: none;

        transition: transform 250ms ease-in-out;

        &:not(:last-child) {
          margin-bottom: 1rem;
        }

        &:hover {
          transform: translateX(2rem);

          @media (max-width: $xl) {
            transform: translateX(1rem);
          }

          @media (max-width: $lg) {
            transform: translateX(0.5rem);
          }
        }

        .article-image {
          max-width: $article-image-size;
          max-height: $article-image-size;

          margin-right: 1rem;
        }

        .article-text {
          .article-title {
            line-height: $article-image-size;
            font-size: 1.2rem;
            margin: 0;
          }

          .article-desc,
          .article-date,
          .article-published {
            display: block;
          }

          .article-date {
            color: darken($text-color, 15%);
          }

          .article-published {
            text-transform: uppercase;
            font-size: 1rem;
            color: red;
          }
        }
      }
    }
  }
}

section.blog-popular {
  .popular-items {
    list-style: none;
    padding: 0;

    li {
      display: grid;
      grid-template-columns: 25px 1fr;

      &:not(:first-child) {
        margin-bottom: 0.25rem;
      }

      &:not(:last-child) {
        margin-top: 0.25rem;
      }

      .arrow {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 25px;
      }

      .link {
        text-decoration: none;
        font-size: 1.2rem;
      }
    }
  }
}

.blog-links {
    &> :not(:first-child) {
        margin-left: 1rem;
    }
}