.archive {
  padding-bottom: var(--gap);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.archive .archive-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
}

.archive .years {
  display: none;
  position: relative;
  overflow: hidden;
  max-width: 22rem;
}

.archive .years:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

.archive .year {
  opacity: 0.5;
  margin-right: calc(var(--gap) / 2);
}

.archive ul {
  margin-top: calc(var(--gap) * 5);
}

.archive .placeholder {
  display: none;
}

@media (min-width: 50rem) {
  .archive ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 calc(var(--gap) * 2);
  }

  .archive .placeholder {
    display: block;
  }
}

.archive .headline a {
  display: inline-block;
  margin-top: calc(var(--gap) * 2);
}

.archive.invert .headline a {
  color: inherit;
}