.gallery__grid p {
    display: none;
  }
  
  .gallery__grid {
      width: 100%;
      display: grid;
      grid-auto-flow: dense;
      grid-template:
        "1fr 1fr 1fr 1fr 1fr" 33.33vh
        "1fr 1fr 1fr 1fr 1fr" 33.33vh
        "1fr 1fr 1fr 1fr 1fr" 33.33vh;
        
      /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 100px 100px 100px 100px; */
      grid-gap: 10px;
    }
    
    /* .gallery__grid .box:first-child {
        grid-column: 1/2;
        grid-row: 1/3;
        background-color: red;
    } */
    
    .gallery__grid .box {
      position: relative;
      background: #ccc;
      cursor: pointer;
    }
    
    .gallery__grid .box header {
      display: none;
      padding: 0;
      width: 100%;
      text-align: center;
      text-transform: capitalize;
      background-color: transparent;
      font-family: var(--font-primary);
      font-size: 1.2rem;
      font-weight: 300;
      color: transparent;
      position: absolute;
      bottom: 0;
      transition: 400ms;
      -webkit-transition: 400ms;
      -moz-transition: 400ms;
      -ms-transition: 400ms;
      -o-transition: 400ms;
    }
    
    .gallery__grid .box:hover header{
      /* display: block; */
      color: rgb(175, 175, 175);
      border-top: 2px solid rgba(0, 0, 0, 0.137);
      background-color: #000000a1;
      padding: 20px 0;
    }
    
    .gallery__grid .box header h2 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 400;
      color: transparent;
    }
    
    .gallery__grid .box header p {
      font-size: 1rem;
      font-weight: 300;
      color: transparent;
    }
    
    .gallery__grid .box:hover header p, .gallery__grid .box:hover header h2{
      /* display: block; */
      color: rgb(231, 231, 231);
    }
    
    .gallery__grid .box.a,
    .gallery__grid .box.g {
      grid-row: span 2;
    }
    
    .gallery__grid .box.b,
    .gallery__grid .box.f,
    .gallery__grid .box.h,
    .gallery__grid .box.i {
      grid-column: span 2;
    }
    
    .gallery__grid .box img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* outline: 2px solid rgb(26, 26, 26);
      outline-offset: -4px; */
      transition: 100ms;
      -webkit-transition: 100ms;
      -moz-transition: 100ms;
      -ms-transition: 100ms;
      -o-transition: 100ms;
    }
    
    .gallery__grid .box::after {
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.534);
      position: absolute;
      top:0;
      left: 0;
      transition: 300ms;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -ms-transition: 300ms;
      -o-transition: 300ms;
    }
    
    .gallery__grid .box:hover::after {
      background-color: rgba(0, 0, 0, 0);
    }
    
    .gallery__grid .box:hover img {
      outline: 1px solid rgb(46, 46, 46);
      outline-offset: 2px;
    }
    
    @media (max-width: 991px) {
      .gallery__grid {
        grid-template:
          "1fr 1fr 1fr" 250px
          "1fr 1fr 1fr" 250px
          "1fr 1fr 1fr" 250px
          "1fr 1fr 1fr" 250px
          "1fr 1fr 1fr" 250px;
      }
    }
    @media (max-width: 768px) {
      .gallery__grid {
        grid-template:
          "1fr 1fr" 200px
          "1fr 1fr" 200px
          "1fr 1fr" 200px
          "1fr 1fr" 200px
          "1fr 1fr" 200px
          "1fr 1fr" 200px
          "1fr 1fr" 200px;
      }
    }
    .gallery__grid .box.h {
      grid-column: span 1;
    }
  
    /* ***********************************
    *
    *  gallery slider location page
    *  
    * ************************************ */
  
    .section__image-gallery{
      /* padding-top: 60px; */
      /* height: 100vh; */
      vertical-align: center;
    }
  
    .wrap__image-gallery{
      overflow: hidden;
    }
  
    .gallery__form-wrap {
      color: rgb(190, 190, 190);
      margin-bottom: 20px;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
  }
  .top__section, .form__section {
    padding: 30px;
    background-color: rgb(36, 36, 36);
    border: 2px solid #1a1a1a;
  }
  
    .gallery__form-header {
      padding-bottom: 15px;
      font-family: var(--font-primary);
      font-size: 1.2rem;
      text-transform: capitalize;
      text-align: center;
      border-bottom: 2px solid #1a1a1a;
    }
  
    .gallery__form-body{
      padding: 30px 0 0;
    }
  
    .gallery__form-body p {
      color: #8b8b8b;
      padding: 0 5px;
    }
  
    .gallery__form-body-top {
      /* padding-bottom: 10px; */
      /* border-bottom: 2px solid #1a1a1a; */
    }
  
    #my-carousel .item img {
      width: 100%;
    }
    .owl-next,
    .owl-prev {
      width: 22px;
      height: 40px;
      margin-top: -20px;
      position: absolute;
      top: 50%;
    }
  
    .owl-prev {
      left: 20px;
    }
  
    .owl-next {
      right: 20px;
    }
  
    .navigation-img-wrapper {
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  
    .navigation-img-wrapper .navigator {
      /* display: inline-block; */
      width: 95%;
      cursor: pointer;
      border-radius: 6px;
      text-align: center;
    }
  
    .navigation-img-wrapper .navigator.active {
      color: white;
    }
  
    @media(min-width: 900px){
      .wrap__image-gallery {
        /* margin-top: 100px;
        padding-top: 65px; */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
  
      .owl-carousel .item {
        margin: 0px 10px 0;
      }
   
      .section__image-gallery .wrap__left {
        width: 60%;
        /* float: left; */
      }
  
      .section__image-gallery .wrap__right {
        width: 40%;
        /* float: left; */
        /* padding-top: 65px; */
      }
      #my-carousel .item img {
        height: 400px;
        width: 100%;
      }
  
      .navigation-img-wrapper .navigator img {
        width: 95%;
        height: 100px;
      }
    }
  
    @media(max-width: 899px){
      .navigation-img-wrapper .navigator {
        display: none;
      }
  
      #my-carousel .item img {
        height: 400px;
      }
      
  
      .owl-carousel .item {
        margin: 70px 10px 0;
      }
    }