._notes {
  position: relative;
}
._notes h3 {
  font-size: var(--font-size-small);
  margin: 0;
  position: absolute;
}

._notes ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style-type: none;
  align-items: flex-start;
  padding: 0;
  gap: 1rem;
}

._note {
  position: relative;
  flex: 0 1 320px;
  font-size: var(--font-size-small);
  margin-bottom: 1rem;
  padding: 0.5rem 2rem 0 1rem;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 320px;
  page-break-inside: avoid;

  background-color: white;
  border: 2px solid var(--beige-fond);
}

._note:hover,
._note:focus-visible,
._note:target,
._note.is--linkedHovered {
  z-index: 1;
  border-color: var(--part-color);
}
._note:hover ._topRightCorner,
._note:focus-visible ._topRightCorner,
._note:target ._topRightCorner,
._note.is--linkedHovered ._topRightCorner {
  --border-color: var(--part-color);
  --corner-color: var(--part-color);
}

._note .text {
  font-size: var(--font-size-small);
}
._note .text > * {
  margin: 1rem 0;
}
._note .text figure {
  margin-left: 0;
  margin-right: 0;
}
._note .text > *:first-child {
  margin-top: 0;
}

@media (max-width: 1023px) {
  ._note {
    position: relative !important;
  }
}
@media (min-width: 1024px) {
  ._notes {
    flex-flow: column nowrap;
  }

  ._note {
    /* position: absolute; */
    top: var(--link-dist-to-top, 0);
    left: 0;
    /* transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1); */
  }
}

._noNotesToShow {
  width: 100%;
  text-align: center;
  font-size: var(--font-size-small);
  margin: 1rem 0;
}