<main>
  <div class="example">
    <div class="example__demo example__demo--minmax">
      <div class="grid">
        <div class="grid__col-1">
          <p> Try resizing this Pen's width to see how <code>minmax()</code> works.</p>
        </div>
        <div class="grid__col-2">
          <p>In this example, we have two minmax() function arguments present in our grid-template-columns property</p>
        </div>
        <div class="grid__col-3"></div>
        <div class="grid__col-4">
          <p>I am a sentence that contains exactly nine words.</p>
        </div>
        <div class="grid__col-5">
          <img src="https://hongkiat.github.io/demo-img/codepen/beach.png" alt="Beach">
        </div>
      </div>
    </div>
  </div>
</main>

// Demo
.grid {
  display: grid;
  grid-template-columns: minmax(100px, 200px) minmax(min-content, 30%) 1fr minmax(min-content, 300px) minmax(min-content, max-content);
}

.grid__col-1 {
  background-color: var(--color-sand);
}

.grid__col-2 {
  border: 2px dashed var(--color-cerulean);
  background-color: rgba(2, 166, 242, 0.2);
}

.grid__col-3 {
  background-color: var(--color-hibiscus);
  border: 1px solid var(--color-cerulean);
}

.grid__col-4 {
  background-color: var(--color-cerulean);
  border: 1px solid var(--color-cerulean);
}


// Pen Setup
.example__demo--minmax {
  padding: 0.75rem;
  margin-top: 0;
  
  p {
    color: var(--color-cinder);
    line-height: 1.25;
    padding: 0.5rem;
  }
}