<header class="header">
  <div class="header__title">
    <h1>
      <code>linear-gradient()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#search=linear-gradient()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      This example contains a variety of gradients, each using the <code>linear-gradient()</code> function's syntax to create a variety of visual effects:
    </p>

    <div class="example__demo example__demo--linear-gradient">
      <h2>Simple 2 color linear gradient</h2>
      <div class="gradient gradient--a"></div>
      <h2>2 column with blurry split</h2>
      <div class="gradient gradient--b"></div>
      <h2>4 rows</h2>
      <div class="gradient gradient--c"></div>
      <h2>Hazy fade</h2>
      <div class="gradient gradient--d"></div>
    </div>
  </div>
</main>

// Demo
.gradient--a {
  background: linear-gradient(to right, #000000 0%, #ffffff 100%);
}

.gradient--b {
  background: linear-gradient(to right, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%);
}

.gradient--c {
  background: linear-gradient(to bottom, #03a9f4 0%, #03a9f4 25%, #f29235 25%, #f29235 50%, #c83361 50%, #c83361 75%, #53b256 75%, #53b256 100%);
}

.gradient--d {
  background-image: linear-gradient(315deg, #fde7f9 0%, #aacaef 74%);
}


// Pen Setup
.example__demo--linear-gradient {
  background-color: var(--color-cinder);
}

.gradient {
  height: 5rem;
  width: 100%;
}

h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

h2:not(:first-of-type) {
  margin-top: var(--size-epsilon);
}