<header>
  <h1>Dashboard</h1>
</header>
<nav>
  <span class="site-id">ACME Corp</span>
  <ul class="list-unstyled">
    <li><a href="javascript:;">Nav A</a></li>
    <li><a href="javascript:;">Nav B</a></li>
    <li><a href="javascript:;">Nav C</a></li>
  </ul>
</nav>
<main>
  <ul class="list-unstyled grid">
    <li class="card grid" style="--grid-min: 15ch;">
      <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
      <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
    </li>
    <li class="card"></li>
    <li class="card"></li>
  </ul>

  <ul class="list-unstyled flex">

    <li class="card">
      <div class="flex" style="--flex-min: 18rem;">
        <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
        <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
      </div>
    </li>
    <li class="card">
      <h3>Using `.flex--auto` on titles</h3>
      <ul class="list-unstyled" style="--flex-min: 8rem;">
        <li class="flex"><strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex"><strong class="flex--auto">Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex"><strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
    <li class="card" style="--flex-min: 40rem;">
      <h3 class="flex">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="icon flex--auto">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
        <span style="--flex-min: 15rem;">
          Card Header Of A Longish Nature
        </span>
      </h3>
      <ul class="list-unstyled" style="--flex-min: 15rem;">
        <li class="flex"><strong>Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex"><strong>Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex"><strong>Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
  </ul>

  <ul class="list-unstyled flex-pancake">
    <li class="card">
      <div class="flex-pancake" style="--pancake-min: 15ch;">
        <p>Jujubes soufflé cake tootsie roll sesame snaps cheesecake bonbon. </p>
        <p>Halvah bear claw cheesecake. Icing lemon drops chupa chups pudding tiramisu.</p>
      </div>
    </li>
    <li class="card">
      <h3>Using `.flex--auto` on titles</h3>
      <ul class="list-unstyled" style="--pancake-min: 8ch;">
        <li class="flex-pancake"><strong class="flex--auto">Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex-pancake"><strong class="flex--auto">Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex-pancake"><strong class="flex--auto">Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
    <li class="card">
      <h3 class="flex-pancake">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" class="icon flex--auto">
          <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
        </svg>
        <span style="--pancake-min: 15ch;">
          Card Header Of A Longish Nature
        </span>
      </h3>
      <ul class="list-unstyled" style="--pancake-min: 11ch;">
        <li class="flex-pancake"><strong>Ice Cream</strong> <span>Butter Pecan</span></li>
        <li class="flex-pancake"><strong>Musical Artist</strong> <span>Justin Timberlake</span></li>
        <li class="flex-pancake"><strong>Painter</strong> <span>Vincent Van Gogh</span></li>
      </ul>
    </li>
  </ul>
</main>

// Learn about these techniques:
// @link https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox/

$brand-color: #2f28e3;

// * and .list-unstyled here due to cascade
* {
  box-sizing: border-box;
}

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

:root {
  --grid-min: 20ch;
  --flex-min: 35rem;
  --pancake-min: var(--grid-min);
}

// Grid solution
.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));

  li {
    outline-color: green;
  }
}

// Flex solution #1
// "Flexbox Albatross"
.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem -0.5rem;

  > * {
    flex-grow: 1;
    flex-basis: calc((var(--flex-min) - 100%) * 999);
    margin: 0.5rem;

    &.flex--auto {
      flex: 0 1 auto;
    }
  }
}

// Flex Solution #2
// "Deconstructed Pancake"
.flex-pancake {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem -0.5rem;

  > * {
    flex: 1 1 var(--pancake-min);
    margin: 0.5rem;
    
    &.flex--auto {
      flex: 0 1 auto;
    }
  }

  li {
    outline-color: purple;
  }
}

// Demo styles
body {
  min-height: 100vh;
  font-family: "Baloo 2", sans-serif;
  display: grid;
  grid-template-areas:
    "nav header"
    "nav main";
  grid-template-columns: minmax(auto, 12ch) minmax(40ch, 1fr);
  grid-template-rows: auto 1fr;
}

header {
  grid-area: header;
  background-color: $brand-color;
  color: #fff;
  padding: 1rem;
}

nav {
  grid-area: nav;
  padding: 1rem;

  > ul {
    li {
      display: flex;
      align-items: center;
      margin: 0.25rem 0;
      padding: 0.25rem 0;
      min-height: 44px;

      a {
        display: block;
        width: 100%;
        color: $brand-color;
        text-decoration: none;

        &:hover {
          font-weight: bold;
        }
      }

      + li {
        border-top: 1px solid scale-color($brand-color, $lightness: 80%);
      }
    }
  }
}

main {
  grid-area: main;
  background: #f9f9f9;
  padding: 3rem 1rem;
}

.site-id {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.card {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  outline: 1px solid red;
  min-height: 20vh;
}

h1,
h2,
h3 {
  margin: 0;
}

.icon {
  width: 24px;
  height: 24px;
}