.posts_wrapper {
  .single_post_list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--gap-l) var(--gap-s);

    .single_post {
      flex-basis: 100%;
      text-decoration: none;
    }

    /* responsive */
    @media (width >= 576px) {
      .single_post {
        flex-basis: calc(50% - (var(--gap-s) * 1) / 2);
      }
    }

    @media (width >= 768px) {
      .single_post {
        flex-basis: calc(33.333% - (var(--gap-s) * 2) / 3);
      }
    }
  }
}