.note {
  position: relative;
  border: 1px solid var(--lighter-gray);
  background: var(--lightest-gray);
  padding: var(--gap-half);
  color: var(--article-color);
  margin: var(--gap-half) 0;
}

.note .icon {
  --info-stroke-circle-color: var(--light-gray);
  --info-stroke-color: var(--fg);
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.note .content {
  padding-left: var(--gap);

  p {
    margin: 0;
  }
}
