/*
 * - Global CSS Variables
 */
@layer page {
  main article header {
    display: flex;
    align-items: baseline;
    justify-items: stretch;
  }
  main article header h2 {
    margin-right: auto;
  }
  main article header time {
    background: var(--color-selected);
    border-radius: var(--radius-M);
    padding: 0.5rem;
  }
  nav.pagination {
    display: flex;
    margin-top: var(--space-XL);
  }
  @media (min-width: 960px) {
    nav.pagination {
      justify-content: center;
      gap: 0.5rem;
    }
  }
  @media (max-width: 959px) {
    nav.pagination {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
  }
  nav.pagination a:not(.paginate) {
    display: block;
    padding: 0 0.5rem;
    background: var(--color-selected);
    border-radius: var(--radius-M);
  }
  nav.pagination a:not(.paginate), nav.pagination a:not(.paginate):link, nav.pagination a:not(.paginate):visited, nav.pagination a:not(.paginate):active, nav.pagination a:not(.paginate):hover, nav.pagination a:not(.paginate):focus {
    text-decoration: none;
  }
  nav.pagination a:not(.paginate):hover, nav.pagination a:not(.paginate):focus {
    background: var(--color-CI-1);
    color: var(--color-body-text-inverted);
  }
  nav.pagination a[aria-current=page] {
    background: var(--color-CI-1);
    color: var(--color-body-text-inverted);
  }
  nav.pagination a.paginate {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  nav.pagination ol {
    list-style: none;
  }
  nav.pagination ol, nav.pagination ol li {
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  @media (max-width: 959px) {
    nav.pagination ol {
      display: block;
    }
  }
}

/*# sourceMappingURL=blog.css.map */