.list {
  padding: 0 20px;
}

.list > h2 {
  margin: 0;
  padding-top: 20px;
}

.list > h3 {
  margin: 0;
  padding-top: 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row:hover .row-title {
  color: var(--accent-text);
}

.row-title {
  font-weight: 650;
  overflow-wrap: anywhere;
}

.row-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.row-meta {
  text-align: right;
  font-size: 14px;
  flex: none;
}

.row-chevron {
  color: var(--chevron);
  width: 16px !important;
}

.avatar {
  height: 46px;
  width: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 650;
  font-size: 15px;
  background: var(--avatar-sand);
  color: var(--avatar-sand-ink);
  flex: none;
}

.list-row:nth-child(4n+2) .avatar {
  background: var(--avatar-sage);
  color: var(--avatar-sage-ink);
}

.list-row:nth-child(4n+3) .avatar {
  background: var(--avatar-rose);
  color: var(--avatar-rose-ink);
}

.list-row:nth-child(4n) .avatar {
  background: var(--avatar-sky);
  color: var(--avatar-sky-ink);
}

img.avatar {
  object-fit: cover;
  background: var(--avatar-sand);
}

.avatar.large {
  width: 76px;
  height: 76px;
  border-radius: 26px;
  font-size: 25px;
}