/**
 * Posts and lists styling
 */
/* Page and post headings */
.page-heading {
  font-size: calc(var(--base-font-size) * 2);
}

.post-list-heading {
  font-size: calc(var(--base-font-size) * 1.75);
}

/* Post list styles */
.post-list {
  margin-left: 0;
  list-style: none;

  & > li {
    margin-bottom: var(--spacing-unit);
  }
}

.post-meta {
  font-size: var(--small-font-size);
  color: var(--grey-neutral);
}

.post-link {
  display: block;
  font-size: calc(var(--base-font-size) * 1.5);
}

/**
 * Individual post pages
 */
.post-header {
  margin-bottom: var(--spacing-unit);
}

.post-title {
  font-size: calc(var(--base-font-size) * 2.625);
  letter-spacing: -1px;
  line-height: 1;

  /* @media screen and (max-width: var(--on-laptop)) { */
  @media screen and (max-width: 800px) {
    font-size: calc(var(--base-font-size) * 2.25);
  }
}

.post-content {
  margin-bottom: var(--spacing-unit);

  /* Heading size hierarchy */
  & h2 {
    font-size: calc(var(--base-font-size) * 2);

    /* @media screen and (max-width: var(--on-laptop)) { */
    @media screen and (max-width: 800px) {
      font-size: calc(var(--base-font-size) * 1.75);
    }
  }

  & h3 {
    font-size: calc(var(--base-font-size) * 1.625);

    /* @media screen and (max-width: var(--on-laptop)) { */
    @media screen and (max-width: 800px) {
      font-size: calc(var(--base-font-size) * 1.375);
    }
  }

  & h4 {
    font-size: calc(var(--base-font-size) * 1.25);

    /* @media screen and (max-width: var(--on-laptop)) { */
    @media screen and (max-width: 800px) {
      font-size: calc(var(--base-font-size) * 1.125);
    }
  }
}