<div class="wrapper">
  <h1>Our products</h1>
  <p>
    Dolor sit amet consectetur adipisicing elit. Quo expedita voluptas
    provident.
  </p>
  <div class="layout">
    <main class="grid">
      <div class="product">
        <img src="https://images.unsplash.com/photo-1559715541-5daf8a0296d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="Toy duck in a batman costume" />
        <h3 class="product__title">Bat Duck</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="lego stormtrooper" />
        <h3 class="product__title">Lego Storm Trooper</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1627752458987-d721d34ecd68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxNjN8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Figurines</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1599481238505-b8b0537a3f77?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Gundam</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product" data-featured="true">
        <img src="https://images.unsplash.com/photo-1605287977617-ddd865d5f696?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Stuffed hamster</h3>
        <p class="product__description">
          A nice fuzzy and cuddly stuffed hamster for you to snuggle with
          and enjoy. Might be small in size, but it isn't small in cuteness.
        </p>

        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1556012018-50c5c0da73bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Teddy bear</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Super Mario Figurines</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1517242810446-cc8951b2be40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Lego duck man</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>
    </main>

    <aside>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
        minima quasi ipsa!
      </p>
    </aside>
  </div>
</div>

<!-- This is from a different demo that I forked for this one
     it's a good tutorial looking at container queries and subgrid :) -->
<!-- <a class="yt" href="https://youtu.be/pKHKQwAsZLI">
  Watch the tutorial
</a> -->