/* ------ GRID -------- */

main ul.posts {
    margin-top: calc(var(--space-half) * 1.25);
}

ul.posts {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(256px, 1fr)); */
  grid-gap: 0px 32px;
  align-items: start;
}

ul.posts li.year ul.year li.post {
  display: inline;
}

ul.posts a {
  padding: 4px 6px 4px 6px;
  margin: -4px -6px 4px -6px;
}

/* --------- UI ---------- */

ul.posts li.year ul.year li.post:not(:last-child) {
  border-right-width: 1px;
  border-right-style: solid;
  /* border-right-color: #c0c0ff; */
  padding-right: 8px;
  margin-right: 6px;
}

main ul.posts {
  margin-top: -1px !important;
}

h2.year {
  margin-bottom: 0px;
  border-bottom-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

ul.posts li.year {
  margin-bottom: calc(var(--space-2x));
}

ul.posts li.year ul {
  /* padding-top: 8px; */
  line-height: var(--line-height-index);
}

/* ------- COLORS -------- */

html[data-slug="posts"] {
  background-color: blue !important;
}

ul.posts li.year {
  color: rgb(160, 160, 255);
}

ul.posts li.year a:hover,
ul.posts li.year a:active {
  color: blue;
  background-color: white;
}

ul.posts a,
ul.posts a:visited {
  font-weight: bold;
  color: white;
}

ul.posts a:hover,
ul.posts a:focus {
  color: blue !important;
  background-color: white !important;
}

ul.posts a:active {
  color: blue;
  background-color: cyan;
}

/* -------- LINKS --------- */

a.post-link {
  background-image: url('../icons/post-link-alternate.png');
}

a.post-link:hover,
a.post-link:active {
  background-image: url('../icons/post-link-color.png');
}