.yes {
  display: grid;
  margin-left: var(--space-medium);
  margin-right: var(--space-medium);
  position: relative;
}

.yes ul {
  display: grid;
  gap: 0.8em;
  margin-top: -0.125em;
}

.yes ul li {
  font-size: var(--font-size-xx-small);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.325em;
  margin-top: -0.35em;
  padding-left: 1.65em;
  position: relative;
}

.yes ul li:before {
  align-items: center;
  background: url('/assets/images/general/icon-checkmark.svg') center center/0.55em auto no-repeat var(--color-green);
  border-radius: 100%;
  content: '';
  display: flex;
  height: 1.175em;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 0.1em;
  width: 1.175em;
}



@media(min-width: 64em) {

  .yes {
    margin-left: var(--space-neutral);
    margin-right: var(--space-neutral);
  }

  .yes ul li:after {
    background: var(--color-yellow);
    color: var(--color-black);
    content: 'YES!';
    display: inline-block;
    font-family: 'Sharpie', Sans-Serif;
    font-size: var(--font-size-small);
    font-variant-ligatures: none;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-left: 0.4em;
    padding: 0.3em 0.425em 0.35em 0.5em;
    pointer-events: none;
    text-transform: uppercase;
    vertical-align: top;
  }

  .yes ul li:nth-child(odd):after {
    transform: rotate(-3.5deg) translateY(-0.05em);
  }

  .yes ul li:nth-child(even):after {
    transform: rotate(3.5deg) translateY(0.15em);
  }

}