#guidelines {
  h3 {
    display: inline-block;
    transform: rotate(-8deg) translateX(-10%);
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));

    @supports (background-clip: text) or (-webkit-background-clip: text) {
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @media (min-width: 120ch) {
      transform: rotate(-8deg) translateX(-30%);
    }
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    p:nth-of-type(2) {
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(4deg) translate(4.75rem, -3.5rem);
        transform-origin: left center;
        -webkit-background-clip: text;
        background-clip: text;
        color: var(--color-primary-alt);
        font-size: 0.9em;
        font-weight: normal;
        content: "← Whoa, text gradients!";
      }
    }
  }

  .container > a {
    align-self: center;
  }
}
