Course Video Grid

<div class="container py-5">
  <h3 class="fw-bold mb-4">Free video courses</h3>
  <div class="row g-4">
    <div class="col-md-3 col-6"><a href="#" class="text-decoration-none text-dark">
        <div class="position-relative rounded-3 overflow-hidden"><img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=250&fit=crop" alt="HTML course thumbnail" class="w-100"><span class="badge bg-dark position-absolute bottom-0 end-0 m-2">12 lessons</span></div>
        <h6 class="fw-bold mt-2 mb-0">HTML Basics</h6><small class="text-muted">3h 20m</small>
      </a></div>
    <div class="col-md-3 col-6"><a href="#" class="text-decoration-none text-dark">
        <div class="position-relative rounded-3 overflow-hidden"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=250&fit=crop" alt="CSS course thumbnail" class="w-100"><span class="badge bg-dark position-absolute bottom-0 end-0 m-2">15 lessons</span></div>
        <h6 class="fw-bold mt-2 mb-0">CSS Mastery</h6><small class="text-muted">4h 10m</small>
      </a></div>
    <div class="col-md-3 col-6"><a href="#" class="text-decoration-none text-dark">
        <div class="position-relative rounded-3 overflow-hidden"><img src="https://images.unsplash.com/photo-1550439062-609e1531270e?w=400&h=250&fit=crop" alt="JavaScript course thumbnail" class="w-100"><span class="badge bg-dark position-absolute bottom-0 end-0 m-2">20 lessons</span></div>
        <h6 class="fw-bold mt-2 mb-0">JS Fundamentals</h6><small class="text-muted">6h 45m</small>
      </a></div>
    <div class="col-md-3 col-6"><a href="#" class="text-decoration-none text-dark">
        <div class="position-relative rounded-3 overflow-hidden"><img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&h=250&fit=crop" alt="React course thumbnail" class="w-100"><span class="badge bg-dark position-absolute bottom-0 end-0 m-2">18 lessons</span></div>
        <h6 class="fw-bold mt-2 mb-0">React from Zero</h6><small class="text-muted">5h 30m</small>
      </a></div>
  </div>
</div>
<script>
  /*__yt_norm__*/
  (function() {
    function norm(u) {
      try {
        var m = String(u).match(/(?:v=|youtu\.be\/|\/embed\/|\/shorts\/|\/live\/)([\w-]{11})/);
        return m ? ("https://www.youtube.com/embed/" + m[1]) : u;
      } catch (e) {
        return u;
      }
    }
    document.querySelectorAll("iframe").forEach(function(f) {
      var s = f.getAttribute("data-yt") || f.getAttribute("src") || "";
      if (!s) return;
      var n = norm(s);
      if (n && n !== f.src) f.src = n;
    });
  })();

</script>