<?php include 'header.php';?>

<style>

.pd-10img img {
    padding-bottom: 20px;
        padding-right: 20px;
}
.pb-30 {
        padding-bottom: 30px;
}
</style>



<section class="inner-banner bg-light">
    <div class="container">
        <div class="row align-items-center intro-title">
            <div class="col-12">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"> <i class="fas fa-home"></i> </a></li>
                    <li class="breadcrumb-item"> <i class="fas fa-chevron-right"></i> Media & Blogs</li>
                    <li class="breadcrumb-item active"> <i class="fas fa-chevron-right"></i> <span>Gallery </span></li>
                </ol>
            </div>
        </div>
    </div>
</section>





<section style="padding: 60px 0px 100px 0px;">
            
            <div class="container">
                <h3 class="center animated slideInDown pb-30"><span>Lorem Ipsum  </span></h3>
                <div class="row pd-10img">
                    
                    <rectpackr-layout>
  
  <!--<img src="https://picsum.photos/400/300?random=5" width="400" height="300" alt="Image 5" />-->
  <!--<img src="https://picsum.photos/800/300?random=6" width="800" height="300" alt="Image 6" />-->
  <!--<img src="https://picsum.photos/400/600?random=7" width="400" height="600" alt="Image 7" />-->
  <!--<img src="https://picsum.photos/400/300?random=8" width="400" height="300" alt="Image 8" />-->
  <!--<img src="https://picsum.photos/400/300?random=9" width="400" height="300" alt="Image 9" />-->
  <!--<img src="https://picsum.photos/400/300?random=10" width="400" height="300" alt="Image 10" />-->
  <!--<img src="https://picsum.photos/400/300?random=11" width="400" height="300" alt="Image 11" />-->
  <!--<img src="https://picsum.photos/800/300?random=12" width="800" height="300" alt="Image 12" />-->
  <!--<img src="https://picsum.photos/800/300?random=13" width="800" height="300" alt="Image 13" />-->
  <!--<img src="https://picsum.photos/800/600?random=14" width="800" height="600" alt="Image 14" />-->
  <!--<img src="https://picsum.photos/400/600?random=15" width="400" height="600" alt="Image 15" />-->
  <!--<img src="https://picsum.photos/400/300?random=16" width="400" height="300" alt="Image 16" />-->
  <!--<img src="https://picsum.photos/400/300?random=17" width="400" height="300" alt="Image 17" />-->
  <!--<img src="https://picsum.photos/800/300?random=18" width="800" height="300" alt="Image 18" />-->
  <!--<img src="https://picsum.photos/400/600?random=19" width="400" height="600" alt="Image 19" />-->
  <img src="https://picsum.photos/400/300?random=20" width="400" height="300" alt="Image 20" />
  <img src="https://picsum.photos/400/300?random=21" width="400" height="300" alt="Image 21" />
  <img src="https://picsum.photos/400/300?random=22" width="400" height="300" alt="Image 22" />
  <img src="https://picsum.photos/400/300?random=23" width="400" height="300" alt="Image 23" />
  <img src="https://picsum.photos/800/300?random=24" width="800" height="300" alt="Image 24" />
</rectpackr-layout>


                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                    <!--<div class="col-md-4">-->
                    <!--    <img src="images/admission.jpg" class="img100">-->
                    <!--</div>-->
                </div>
            </div>


</section>




    
    
<script>
    rectpackr-layout {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 8px;
}

rectpackr-layout > * {
  box-sizing: border-box;
  display: block;
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  padding: 8px;
  border-radius: 16px;
}

rectpackr-layout > *:nth-child(12n + 1),
rectpackr-layout > *:nth-child(12n + 6),
rectpackr-layout > *:nth-child(12n + 12) {
  aspect-ratio: 8/3;
}

rectpackr-layout > *:nth-child(12n + 3),
rectpackr-layout > *:nth-child(12n + 7) {
  aspect-ratio: 2/3;
}

@media (min-width: 500px) {
  rectpackr-layout > * {
    --base-size: 50%;
    width: var(--base-size);
  }

  rectpackr-layout > *:nth-child(12n + 1),
  rectpackr-layout > *:nth-child(12n + 2),
  rectpackr-layout > *:nth-child(12n + 6),
  rectpackr-layout > *:nth-child(12n + 12) {
    width: calc(2 * var(--base-size));
  }
}

@media (min-width: 800px) {
  rectpackr-layout > * {
    --base-size: 25%;
  }
}

@media (min-width: 1400px) {
  rectpackr-layout > * {
    --base-size: 19.999%;
  }
}

@media (min-width: 1800px) {
  rectpackr-layout > * {
    --base-size: 12.5%;
  }
}

@media (min-width: 2200px) {
  rectpackr-layout > * {
    --base-size: 9.999%;
  }
}
</script>
  

<?php include 'footer.php';?>
