.note-header {
  margin-bottom: 3rem;
}
.note-footer {
  padding: 6rem 0;
}
.note-date {
  color: var(--color-text-grey);
}
.note-tags {
  display: flex;
  margin-bottom: 1.5rem;
}
.note-tags li {
  margin-right: .5rem;
}
.note-tags a {
  padding: .5rem 1rem;
  display: block;
  background: var(--color-light);
}
.note-tags a:hover {
  background: var(--color-black);
  color: var(--color-white);
}

article.note {
  background-color: #FFFFFF;
  padding: var(--padding);
  border-radius: var(--radius);
  margin: 0 calc(-1 * var(--padding));
  margin-top: var(--padding);
}

h2 a, h3 a, h4 a, h5 a {
  color: var(--color-text-grey);
  vertical-align: middle;
}

@media screen and (min-width: 60rem) {
  article.note {
    margin: unset;
    margin-top: var(--padding);
  }
}