Flash Sale with Countdown

<section class="py-5 bg-danger-subtle position-relative overflow-hidden">
  <div class="container py-4">
    <div class="row align-items-center g-5">
      <div class="col-lg-6 text-center text-lg-start">
        <span class="badge bg-danger text-white px-3 py-2 rounded-pill fw-bold mb-3">LIMITED TIME OFFER</span>
        <h2 class="display-5 fw-bold mb-4">Super Flash Sale!</h2>
        <p class="lead mb-4">Grab your favorites at mind-blowing prices.</p>
        <div class="d-flex gap-3 justify-content-center justify-content-lg-start mb-4" id="flashSaleCountdown">
          <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center" style="width:80px;">
            <h3 class="fw-bold mb-0" id="days">00</h3><small class="text-uppercase">Days</small>
          </div>
          <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center" style="width:80px;">
            <h3 class="fw-bold mb-0" id="hours">00</h3><small class="text-uppercase">Hrs</small>
          </div>
          <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center" style="width:80px;">
            <h3 class="fw-bold mb-0" id="minutes">00</h3><small class="text-uppercase">Min</small>
          </div>
          <div class="bg-white text-danger shadow-sm rounded-3 p-3 text-center" style="width:80px;">
            <h3 class="fw-bold mb-0" id="seconds">00</h3><small class="text-uppercase">Sec</small>
          </div>
        </div>
        <a href="#" class="btn btn-danger btn-lg px-5 rounded-pill fw-bold">Shop Deals</a>
      </div>
      <div class="col-lg-6">
        <div class="row g-3">
          <div class="col-6">
            <div class="card border-0 shadow-sm rounded-4"><img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400" class="card-img-top" style="height:200px;object-fit:cover;">
              <div class="card-body text-center">
                <h6 class="fw-bold">Sneakers</h6><span class="text-danger fw-bold">$59.99</span>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="card border-0 shadow-sm rounded-4"><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400" class="card-img-top" style="height:200px;object-fit:cover;">
              <div class="card-body text-center">
                <h6 class="fw-bold">Watch</h6><span class="text-danger fw-bold">$129.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>