.note {
  background-color: var(--_bg-color, var(--accent-50));
  border-left: solid 8px var(--_border-color, var(--accent));
  border-radius: 10px;
}
@media (min-width: 740px) {
  .note {
    --margin-block: 10px;
    --margin-heading: 10px;
    --margin-text: 4px;
  }
}
@media (min-width: 1200px) {
  .note {
    padding: 36px 36px 36px 28px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .note {
    padding: 20px 20px 20px 12px;
  }
}
@media (max-width: 739.98px) {
  .note {
    --margin-block: 6px;
    --margin-heading: 6px;
    --margin-text: 2px;
    padding: 14px 14px 14px 10px;
    border-width: 4px;
  }
}
.note h2 {
  font-weight: 500;
}
@media (min-width: 740px) {
  .note h2 {
    font-size: 34px;
  }
}
.note--secondary {
  --_bg-color: var(--yellow-100);
  --_border-color: var(--yellow-400);
}