.publications-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: clamp(10px, 5cqw, 30px);
}
@media screen and (max-width: 768px) {
  .publications-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

.publication {
  --article-title-color: var(--color-primary);
  --article-background-color: var(--color-white);
  --article-padding: clamp(10px, 5cqw, 20px);
  background-color: var(--article-background-color);
  border: 1px solid var(--article-title-color);
}
.publication__inner, .publication__link {
  display: flex;
  flex-direction: column;
  padding: var(--article-padding);
}
.publication__link:hover {
  --article-title-color: var(--color-secondary);
}
.publication__link::before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  top: var(--article-padding);
  right: var(--article-padding);
  mask: var(--icon-link) center/contain no-repeat;
  background-color: var(--article-title-color);
  transition: var(--transition);
}
.publication::after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--article-title-color);
  border-radius: 50%;
  right: calc(0% - 0.25em - 1px);
  bottom: 3em;
  transition: var(--transition);
}
.publication:nth-child(odd)::after {
  bottom: auto;
  top: 3em;
}
.publication__title {
  font-size: var(--font-size-18);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  color: var(--article-title-color);
  transition: var(--transition);
  line-height: 1.1;
  transition: var(--transition);
}
.publication__year {
  font-size: var(--font-size-14);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  color: var(--color-white);
  padding: 0.2em 0.6em 0.1em;
  background-color: var(--color-secondary);
  margin: 0 0 0.25em 0;
  display: inline-block;
  align-self: flex-start;
}
.publication__authors {
  margin: 0.5em 0 0.25em;
  font-size: var(--font-size-16);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  color: var(--color-primary);
}
.publication__note {
  margin: 0.25em 0 0 0;
  font-size: var(--font-size-14);
  color: var(--color-text);
}
.publication__doi {
  font-size: var(--font-size-14);
  line-height: 1.2;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-optical-sizing: auto;
  letter-spacing: var(--letter-spacing);
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  margin-top: 0.25em;
}
.publication__doi:hover {
  color: var(--color-secondary);
}