/* posts list */

main article figure#article-body-wrapper > div#article-body-content-wrapper > div#posts-wrapper {
  margin: 0;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul > li {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background-color: light-dark(var(--light-mode-surface-color), var(--dark-mode-surface-color));
    border: 1px solid light-dark(var(--light-mode-border-color), var(--dark-mode-border-color));
    border-radius: 8px;
    transition: all 0.2s ease;

    a.post {
      text-decoration: none;
      color: light-dark(var(--light-mode-font-color), var(--dark-mode-font-color));
      display: block;
      margin: 0;
      padding: 1.25rem;

      h3 {
        font-size: 1.1rem;
        margin: 0 0 0.5rem;
        font-weight: 600;
      }

      p {
        margin: 0;
        font-size: 0.9rem;
        color: light-dark(var(--light-mode-font-color-secondary), var(--dark-mode-font-color-secondary));
        line-height: 1.6;
      }

      p.post-date {
        margin: 0.75rem 0 0;
        font-size: 0.8rem;
      }
    }
  }

  ul > li:hover {
    border-color: light-dark(var(--light-mode-accent-color), var(--dark-mode-accent-color));
    box-shadow: 0 4px 12px light-dark(var(--light-mode-box-shadow-color), var(--dark-mode-box-shadow-color));
    transform: translateY(-2px);
  }
}