.list {
  display: grid;
  row-gap: var(--row-gap-1);
  -moz-column-gap: var(--margin);
       column-gap: var(--margin);
  grid-template-columns: 0 minmax(0, var(--max-width)) 0;
  justify-content: space-between;
  padding: var(--row-gap-0) 0 var(--row-gap-1);

  & > * {
    grid-column: 2;
  }
}

.list-header {
  position: relative;

  & .title {
    margin-bottom: var(--row-gap-0);
    font: var(--text-display);
    color: var(--color-foreground);
  }
  & p {
    margin-left: var(--column-gap-0);
    margin-bottom: var(--row-gap-0);
    color: var(--color-foreground);
  }
}

.list-hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.1em;
  padding: 0;
  background-color: var(--color-border-default);
  border: 0;
}

.card {
  display: block;
  max-width: 80%;
  background-color: var(--color-background);
  margin: 12px 0;
  position: relative;
  padding: 10px;
  font: var(--text-body-size);
  color: var(--color-foreground);
}

.card-link {
  display: block;
  color: var(--color-foreground);
  text-align: right;
  margin-left: auto;
}