<div class="bg-red-50 min-h-screen">
  <div class="max-w-7xl mx-auto">
    <div class="board-grid justify-center mt-6">
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 8;">
        <div class="flex flex-col">
          <div class="w-full aspect-video">
            <iframe class="w-full h-full" src="//www.youtube.com/embed/lCYvN7Z2l3E" allowfullscreen="allowfullscreen"></iframe>
          </div>
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">A lion with Dan</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 9;">
        <div class="flex flex-col">
          <img class="w-full overflow-hidden" src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg">
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">The bird</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 8;">
        <div class="flex flex-col">
          <img class="w-full overflow-hidden" src="https://images.unsplash.com/photo-1463288889890-a56b2853c40f?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=3132&amp;q=80">
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">Mountain and lake</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 18;">
        <div class="flex flex-col">
          <div class="w-full overflow-hidden">
            <img class="w-auto h-full mx-auto" src="https://images.unsplash.com/photo-1617369120004-4fc70312c5e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80">
          </div>
          <div class="text-gray-800 p-2 basis-14">
              <div class="flex justify-between">
                <p class="text-md font-bold leading-6 ">Mountain and fog</p>
                <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                  <div class="flex gap-1 mt-1">
                    <span>10</span>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                    </svg>
                  </div>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 8;">
        <div class="flex flex-col">
          <div class="w-full aspect-video">
            <iframe class="w-full h-full" src="//www.youtube.com/embed/1QZIRe-Yvkc" allowfullscreen="allowfullscreen"></iframe>
          </div>
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">Just a bug cat</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 9;">
        <div class="flex flex-col">
          <div class="w-full overflow-hidden">
            <img class="w-auto h-full mx-auto" src="https://images.unsplash.com/photo-1526400473556-aac12354f3db?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2940&amp;q=80">
          </div>
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">The river</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 9;">
        <div class="flex flex-col">
          <div class="w-full overflow-hidden">
            <img class="w-auto h-full mx-auto" src="https://cdn.pixabay.com/photo/2021/11/30/17/06/tree-6835828_960_720.jpg">
          </div>
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">The snow and tree</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>10</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-lg shadow-md hover:shadow-lg card" style="grid-row-end: span 9;">
        <div class="flex flex-col">
          <div class="w-full overflow-hidden">
            <img class="w-auto h-full mx-auto" src="https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=2952&amp;q=80">
          </div>
          <div class="text-gray-800 p-2 basis-14">
            <div class="flex justify-between">
              <p class="text-md font-bold leading-6 ">Mountain summit</p>
              <div class="flex items-center justify-between text-sm text-gray-500 space-x-1">
                <div class="flex gap-1 mt-1">
                  <span>7</span>
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"></path>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
</div>

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 20px;
  grid-row-gap: 10px;
  grid-column-gap: 16px;
}

.card {
  grid-row-end: span 10;
  margin-bottom: 10px;
}