.info-box {
  width: 90%;
  margin: 2rem auto;
  border-left: 3px solid;
  padding: 7px 10px;
  font-size: 1rem;
  line-height: 120%;
}

.info-box ul {
  padding-left: 20px;
}

.info-box::before {
  font-weight: 700;
  text-transform: uppercase;

  display: block;
  width: fit-content;
  margin: 0px 0px 7px 0px;
}

.info-box.no-title::before {
  display: none;
}

/* .warning */
.info-box.warning {
  background-color: var(--infobox-warning-light);
  border-color: var(--infobox-warning);
}

.info-box.warning::before {
  content: "Warning   ";
  color: var(--infobox-warning);
}

/* .note */
.info-box.note {
  background-color: var(--infobox-note-light);
  border-color: var(--infobox-note);
}

.info-box.note::before {
  content: "Note   ";
  color: var(--infobox-note);
}

.info-box.note.notes::before {
  content: "Notes";
}

/* .gotcha, .important */
.info-box.gotcha, .info-box.important {
  background-color: var(--infobox-important-light);
  border-color: var(--infobox-important);
}

.info-box.gotcha::before, .info-box.important::before {
  content: "Important   ";
  color: var(--infobox-important);
}

/* .tip */
.info-box.tip {
  background-color: var(--infobox-tip-light);
  border-color: var(--infobox-tip);
}

.info-box.tip::before {
  content: "Pro tip   ";
  color: var(--infobox-tip);
}

/* .read */
.info-box.read {
  background-color: var(--infobox-read-light);
  border-color: var(--infobox-read);
}

.info-box.read::before {
  content: "Read more   ";
  color: var(--infobox-read);
}