.inset--shadowbox :is(h1, h2, h3, h4, h5, h6):before {
	color: var(--uw-color-brand-spirit-purple);
}

/* Provides left gradient border on inset shadow box. */
.inset--shadowbox--border-left {
  border-image: linear-gradient(180deg, #4b2e83, #4b2e83 35%, #e93cac) 1;
}

/* Provides a bottom border purple to pink to transparent. Intended for use on headings. */
.heading--border-bottom--purple-pink-transparent {
  border-bottom: 8px solid;
  border-image: linear-gradient(
      90deg,
      #4b2e83 10%,
      #e93cac,
      rgba(233, 60, 172, 0) 85%
    )
    1;
  width: 100%;
  padding-bottom: 0.3em; /* This can and probably should go in a different class. */
}

/* Provides gradient, skew and sizing for flag span style. */
li {
  span {
    &.flag--gradient--purple-pink {
      transform: skew(-15deg);
      padding: 0.3em 1.25em 0.3em 0.75em;
      color: #ffffff;
      font-size: 0.65em;
      font-weight: bold;
      background: linear-gradient(90deg, #4b2e83, #e93cac);
      span {
        transform: skew(15deg);
        display: inline-block;
      }
    }
  }
}

.icon--contentbox {
	margin-top: 2em;
	display: grid;
	grid-template-columns: 35px 1fr;
  width: 100%;
  gap: 10px;
}

.padding-left--45 {
	padding-left: 45px;
}

.ic-left-outdent--45:before {
  margin-left: -45px;
}

.left-outdent--45 {
	margin-left: -45px;
}