.note {
  /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); */
  border: 1px solid #f0f0f1;
  padding: 15px 30px 15px 20px;
  border-radius: 10px;
  border-left: 10px solid #f0f0f1;
  margin-bottom: 15px;
  align-items: center;
  width: 100%;
  grid-auto-columns: auto;
  justify-content: left;
  grid-template-columns: auto 1fr;
  align-items: start;
  min-height: 150px;
}
.note span {
  grid-column: 1;
  grid-row-start: span 9000;
}
.note p,
.note h2,
.note h3,
.note h4,
.note h5,
.note ul,
.note ol {
  padding: 5px;
  grid-column: 2;
  align-self: center;
  color: inherit;
}
.note ol,
.note ul {
  margin-bottom: 0px;
  margin-left: 20px;
}
.note [data-icon]::before {
  font-family: icons;
  content: attr(data-icon);
  padding-right: 10px;
  font-size: 20px;
}
.note p {
  display: block;
}
.note br {
    display: none;
}
.note img {
  object-fit: scale-down;
  max-width: 100px;
  margin-bottom: 0px;
  margin-right: 10px;
}

@media (max-width: 1199px) {
  .note {
    width: auto;
  }
  .note ol,
  .note ul {
    margin-bottom: 0px;
  }
}