.tags > * {
  margin-right: 1rem;
  margin-top: 0.5rem;
}

.tags {
  margin-top: 1rem;
  font-size: var(--text-sm);
  margin-bottom: 1rem;
}

.tags a {
  text-decoration: none;
  color: rgb(117, 117, 117);
}

.post-list__wrapper {
  margin-top: 3rem;
}

.post-list__heading {
  font-size: var(--text-3xl);
  margin-bottom: 1rem;
}

/*
NOTE: here you can arrange posts in a grid layout. 'auto auto' implies two columns
*/
.post-list {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 1rem;
}

@media (max-width: 720px) {
  .post-list {
    list-style: none;
    display: grid;
    grid-template-columns: auto;
    gap: 0 1rem;
  }
}

.post-list__item {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
  padding-top: 2rem;
  border-bottom: 1px solid var(--color-30);
  transition: all 200ms linear;
}

.post-list__item:hover {
  background-color: var(--color-10);
}

/*
.post-list__item:last-child {
  border-bottom: 1px solid rgba(230, 230, 230, 1);
}
*/

.post-list__title {
  font-size: var(--text-2xl);
  margin-top: 0.5rem;
}

.post-list__title a {
  font-weight: normal;
  text-decoration: none;
  color: var(--color);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.post-list__title a:hover {
  /* color: var(--accent); */
  text-decoration: underline;
}

.post-list__meta {
  font-size: var(--text-sm);
  margin-top: 1rem;
  color: var(--color);
}

.post-list__meta > * + * {
  margin-left: 1rem;
}

.post-list__tags {
  text-decoration: none;
  font-size: var(--text-sm);
  margin-top: 0.5rem;
}

.post-list__tags a {
  text-decoration: none;
  color: rgb(117, 117, 117);
}

.post-list__tags a:hover {
  color: var(--accent);
}

.post-list__tags > * + * {
  margin-left: 1rem;
}

.post-list__excerpt {
  margin-top: 1rem;
  color: var(--color-80);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.post-list__read-more {
  width: fit-content;
  font-size: 1rem;
  text-transform: capitalize;
  margin-top: 1rem;
  text-decoration: underline;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.post-list__read-more:hover {
  text-decoration: underline;
}

.all-posts-link {
  margin-top: 4rem;
  width: fit-content;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-lg);
  text-decoration: underline;
  color: currentColor;
}
