.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "org   years"
    "role  role";
  align-items: baseline;
  column-gap: var(--spacing-medium);
  row-gap: var(--spacing-xxxxsmall);
  padding: var(--padding-chip) var(--spacing-xsmall);
  margin-inline: calc(var(--spacing-xsmall) * -1);
  border-radius: var(--radius-small);
  transition: background-color 200ms ease;
}

.row-text { display: contents; }

.row--logo {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo org   years"
    "logo role  role";
}

.row-logo {
  grid-area: logo;
  align-self: center;
}

.row-org {
  grid-area: org;
  font: var(--text-subheadline-medium);
  letter-spacing: var(--text-subheadline-medium-tracking);
  color: var(--content-primary);
}

.row-title {
  grid-area: org;
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  min-width: 0;
}

a.row-org { text-decoration: none; }

a.row-org::after {
  content: "";
  position: absolute;
  inset: 0;
}

.row-role {
  grid-area: role;
  font: var(--text-footnote-regular);
  letter-spacing: var(--text-footnote-regular-tracking);
  color: var(--content-secondary);
}

.row-kind::before {
  content: "  •  ";
  white-space: pre;
}

.row-years {
  grid-area: years;
  font: var(--text-footnote-regular);
  letter-spacing: var(--text-footnote-regular-tracking);
  text-align: right;
  color: var(--content-secondary);
  white-space: nowrap;
}

.row-icon {
  grid-area: years;
  align-self: center;
  justify-self: end;
  color: var(--content-tertiary);
}

@media (hover: hover) {
  .row:has(a):hover {
    background: var(--background-transparent-subtle);
    transition: none;
  }
}