<header class="header">
  <div class="header__title">
    <h1>
      <code>repeat()</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/repeat">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#search=repeat()">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we have a <code>repeat()</code> function present as an argument for our <code>grid-template-columns</code> property. The <code>repeat()</code> function instructs the browser to create six grid columns, alternating between two widths: <code>40px</code> and <code>80px</code>. If we add another list item, <code>repeat()</code>'s instructions will ensure the next column is <code>40px</code> wide.
    </p>

    <div class="example__demo example__demo--repeat">
      <ol class="grid">
        <li class="grid__col">Alpha</li>
        <li class="grid__col">Beta</li>
        <li class="grid__col">Gamma</li>
        <li class="grid__col">Delta</li>
        <li class="grid__col">Epsilon</li>
        <li class="grid__col">Zeta</li>
      </ol>
    </div>
    
    <p>
      Also note that we're using the <code>odd</code> and <code>even</code> keywords for our <code>:nth-child</code> function to control the background colors grid columns! 
    </p>
  </div>
</main>

// Demo
.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(6, 40px 80px);
  height: 6rem;
}

.grid__col:nth-child(odd) {
  background-color: var(--color-sand);
}

.grid__col:nth-child(even) {
  border: 2px dashed var(--color-hibiscus);
  background-color: rgba(341, 74, 78, 0.2);
}


// Pen Setup
.example__demo--repeat {
  color: var(--color-cinder);
  padding: 0.75rem;
}

.grid {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.grid__col {
  padding: 0.5rem 0.25rem;
  writing-mode: vertical-lr;
}