<!-- Modal gallery -->

<section class="container  my-5">

  <!-- Section: Images -->

  <section class="">

    <div class="row">

      <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">

        <div

          class="bg-image hover-overlay ripple shadow-1-strong rounded"

          data-ripple-color="light"

        >

          <img

            src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp"

            class="w-100"

          />

          <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal1">

            <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>

          </a>

        </div>

      </div>

​

      <div class="col-lg-4 mb-4 mb-lg-0">

        <div

          class="bg-image hover-overlay ripple shadow-1-strong rounded"

          data-ripple-color="light"

        >

          <img

            src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"

            class="w-100"

          />

          <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">

            <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>

          </a>

        </div>

      </div>

​

      <div class="col-lg-4 mb-4 mb-lg-0">

        <div

          class="bg-image hover-overlay ripple shadow-1-strong rounded"

          data-ripple-color="light"

        >

          <img

            src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"

            class="w-100"

          />

          <a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">

            <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>

          </a>

        </div>

      </div>

    </div>

  </section>

  <!-- Section: Images -->

​

  <!-- Section: Modals -->

  <section class="">

    <!-- Modal 1 -->

    <div

      class="modal fade"

      id="exampleModal1"

      tabindex="-1"

      aria-labelledby="exampleModal1Label"

      aria-hidden="true"

    >

      <div class="modal-dialog modal-lg">

        <div class="modal-content">

          <div class="ratio ratio-16x9">

            <iframe

              src="https://www.youtube.com/embed/A3PDXmYoF5U?enablejsapi=1"

              title="YouTube video"

              allowfullscreen

            ></iframe>

          </div>

        </div>

      </div>

    </div>

    <!-- Modal 2 -->

    <div

      class="modal fade"

      id="exampleModal2"

      tabindex="-1"

      aria-labelledby="exampleModal2Label"

      aria-hidden="true"

    >

      <div class="modal-dialog modal-lg">

        <div class="modal-content">

          <div class="ratio ratio-16x9">

            <iframe

              src="https://www.youtube.com/embed/wTcNtgA6gHs?enablejsapi=1"

              title="YouTube video"

              allowfullscreen

            ></iframe>

          </div>

        </div>

      </div>

    </div>

    <!-- Modal 3 -->

    <div

      class="modal fade"

      id="exampleModal3"

      tabindex="-1"

      aria-labelledby="exampleModal3Label"

      aria-hidden="true"

    >

      <div class="modal-dialog modal-lg">

        <div class="modal-content">

          <div class="ratio ratio-16x9">

            <iframe

              src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1"

              title="YouTube video"

              allowfullscreen

            ></iframe>

          </div>

        </div>

      </div>

    </div>

  </section>

  <!-- Section: Modals -->

</section>

<!-- Modal gallery -->