nav.pagination {
  margin: 1em;
  display: flex;
  gap: 1ex;
  justify-content: space-between;

  a {
    padding-inline: 1ex;
    border-radius: 1em;

    &:not(:any-link) {
      color: var(--text-sub-color);
    }

    &:any-link {
      background-color: var(--symbol-color);
    }
  }
}

.page > header h1 {
  > svg {
    vertical-align: middle;
    width: 1em;
    height: 1em;
  }
}

ul.posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  list-style: none;
  margin: 0;
  padding: 0;

  li > a:any-link {
    color: var(--text-color);

    &:hover {
      text-decoration: none;

      .post {
        background-color: color-mix(in srgb, var(--fg-color), var(--text-color) 10%);
      }
    }
  }
}

body .post {
  > header {
    > h1 {
      margin-bottom: 0;
      border: none;
    }

    > figure.eye-catch {
      float: right;
      padding-left: 1em;
      width: fit-content;
      max-width: 320px;

      > img {
        object-fit: cover;
        float: right;
        height: 96px;
        max-height: 96px;
        width: fit-content;
      }
    }

    > .metadata > ul.tags {
      justify-content: flex-start;

      > li {
        background-color: transparent;
      }
    }
  }

  > p {
    margin-bottom: 0;
  }
}