/* styles shared by pages index and show pages */

@layer pages {
  ul.page-list {
    list-style: none;
    max-width: 38.5rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* center the list */
    padding: 0 1em;

    a {
      flex-direction: column;
      display: flex;
      text-decoration: none;
      border: 0.15rem solid;
      border-color: var(--page-link-border);
      border-radius: 1rem;
      background: var(--page-link-bg);
      padding: 1.2rem;
      margin: 0 0 1.5rem 0;

      &:hover {
        background: var(--page-link-bg-hover);
        border-color: var(--page-link-border-hover);
        em {
          color: var(--page-link-title-fg-hover);
        }
        small {
          color: var(--page-link-desc-fg-hover);
        }
      }

      em {
        color: var(--page-link-title-fg);
        font-style: normal;
        font-weight: 600;
      }

      small {
        color: var(--page-link-desc-fg);
        font-size: 1.075rem;
      }
    }
  }
}