A digital UI Kit with a robust design

<!-- Hero -->
<div class="position-relative">
  <div class="container content-space-t-1 content-space-t-md-2 content-space-t-lg-5 content-space-b-2 content-space-b-sm-3 content-space-b-md-4 content-space-b-lg-0 content-space-b-xl-4">
    <div class="row">
      <div class="col-lg-5">
        <!-- Heading -->
        <div class="mb-5">
          <h1>A digital UI Kit with a robust design</h1>
          <p class="lead">Super clean, minimalistic, stylized mockup collection with awesome customization.</p>
        </div>
        <!-- End Title & Description -->

        <div class="d-flex align-items-center mb-5" style="max-width: 25rem;">
          <div class="flex-shrink-0">
            <img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
          </div>

          <div class="flex-grow-1 ms-2">
            <p class="small mb-0">Compatible with Figma <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></p>
          </div>
        </div>

        <div class="d-flex align-items-center gap-2 mb-8">
          <a class="btn btn-primary btn-transition me-2" href="../page-login-simple.html">
            Get Started <i class="bi-chevron-right small ms-1"></i>
          </a>

          <!-- Fancybox -->
          <a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
            <i class="bi-play-circle-fill me-1"></i> Play video
          </a>
          <!-- End Fancybox -->
        </div>
      </div>
      <!-- End Col -->
    </div>
    <!-- End Row -->
  </div>

  <!-- Gallery -->
  <div class="col-lg-7 position-lg-absolute top-0 end-0 transform-rotate-n40deg">
    <div class="row gx-3 align-items-end">
      <div class="col-3 mb-10">
        <div class="d-grid gap-3">
          <div data-aos="fade-up">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img6.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="50">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img4.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="100">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x585/img1.jpg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Col -->

      <div class="col-3">
        <div class="d-grid gap-3">
          <div data-aos="fade-up" data-aos-delay="150">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img1.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="200">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="250">
            <img class="img-fluid shadow-primary-lg rounded-2" src="../assets/img/407x283/img1.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="300">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img5.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="350" data-aos-offset="-50">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img9.jpg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Col -->

      <div class="col-3">
        <div class="d-grid gap-3">
          <div data-aos="fade-up" data-aos-delay="400">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img2.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="450">
            <img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img3.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="500">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x867/img3.jpg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Col -->

      <div class="col-3 mb-10">
        <div class="d-grid gap-3">
          <div data-aos="fade-up" data-aos-delay="550">
            <img class="img-fluid shadow rounded-2" src="../assets/img/300x360/img1.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="600">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x535/img1.jpg" alt="Image Description">
          </div>
          <div data-aos="fade-up" data-aos-delay="650">
            <img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Col -->
    </div>
    <!-- End Row -->
  </div>
  <!-- End Gallery -->
</div>
<!-- End Hero -->