.referenced-items {
  letter-spacing: 0.05em;
}

.referenced-items svg {
  height: var(--sp1-25);
  width: var(--sp1-5);
  color: var(--color-text-primary-loud);
  flex-shrink: 0;
}

.referenced-items a {
  text-decoration: none;
}

.top-referenced-items {
  display: flex;
  align-items: center;
  font-size: var(--font-size-s);
  font-weight: bold;
  padding-block: var(--sp0-5);
}

.top-referenced-items .label-referenced-items {
  margin-inline-start: var(--sp0-5);
  color: var(--color-text-neutral-loud);
}

.bottom-referenced-items .field {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  gap: var(--sp0-5);
  margin-inline-start: var(--sp2);
}

.bottom-referenced-items .field__item:nth-last-child(n+2)::after {
  content: ',';
  color: currentColor;
}

.bottom-referenced-items .field a,
.bottom-referenced-items .views-field-title a {
  position: relative;
  padding-block: var(--sp0-25);
}

.bottom-referenced-items .field a::after,
.bottom-referenced-items .views-field-title a::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 0;
  content: "";
  transition: transform 0.2s;
  transform: scaleX(0);
  transform-origin: left;
  border-top: solid 3px var(--color--primary-50);
}

.bottom-referenced-items .field a:hover:after,
.bottom-referenced-items .views-field-title a:hover:after {
  transform: scaleX(1);
}

@media (max-width: 43.75rem) {
    .top-referenced-items {
      align-items: start;
    }
    .bottom-referenced-items .field {
      flex-direction: column;
      gap: var(--sp1);
    }
}