*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

body {
    width: 100%;
    min-height: 100vh;
  }

  .locatii-wrapper-layout{
    display: grid;    
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #f5a593 44%, #f5d1c9 77%, #fff 100%);
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
    row-gap: 0;
  }
  .locatii-layout-h1 {
    font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
    font-size: clamp(.5rem, 3vw, 1rem);
    padding: 0 1.5rem 1rem;
    letter-spacing: 1px;
    line-height: 1.7;
    text-align: center;
    font-weight: 700;
  }
    
  .locatii-content {
    font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
    font-size: calc(10px + 1vw);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 20px;
    padding: 1rem 2rem;
  }

  /* Photo Gallery container */

.wrapper-gallery {
    margin: 0 5vw;
    display: flex;
}

#index-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: 
    "img1 img4 img5 img5"
    "img1 img3 img3 img2"
    "img7 img7 img6 img2"
    "img8 img8 img9 img9"
    "img10 img10 img11 img11"
    "img12 img12 img13 img13"
    "img14 img14 img14 img14"
    "img15 img15 img16 img16";
}

#index-gallery2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas:
    "img1 img5 img4 img4"
    "img1 img2 img2 img3"
    "img6 img6 img7 img3"
    "img8 img8 img9 img9"
    "img10 img10 img11 img11"
    "img12 img12 img13 img13";
}

#index-gallery .gallery-img {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

#index-gallery2 .gallery-img2 {
    width: 100%;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

#index-gallery .gallery-img:hover {
    transform: scale(1.01);
  }

  #index-gallery2 .gallery-img2:hover {
    transform: scale(1.01);
  }

/* Images 9mai*/

#index-gallery .img1 {
    grid-area: img1;
    background-image: url("../images/9mai-min/img1.jpg");
    background-position: right center;
    height: 1010px;
}
#index-gallery .img2 {
    grid-area: img2;
    background-image: url("../images/9mai-min/img2.jpg");
    height: 1010px;
}
#index-gallery .img3 {
    grid-area: img3;
    background-image: url("../images/9mai-min/img3.jpg");
}
#index-gallery .img4 {
    grid-area: img4;
    background-image: url("../images/9mai-min/img4.jpg");
}
#index-gallery .img5 {
    grid-area: img5;
    background-image: url("../images/9mai-min/img5.jpg");
}
#index-gallery .img6 {
    grid-area: img6;
    background-image: url("../images/9mai-min/img6.jpg");
}
#index-gallery .img7 {
    grid-area: img7;
    background-image: url("../images/9mai-min/img7.jpg");   
}
#index-gallery .img8 {
    grid-area: img8;
    background-image: url("../images/9mai-min/img8.jpg");
}
#index-gallery .img9 {
    grid-area: img9;
    background-image: url("../images/9mai-min/img9.jpg");
}
#index-gallery .img10 {
    grid-area: img10;
    background-image: url("../images/9mai-min/img10.jpg");
}
#index-gallery .img11 {
    grid-area: img11;
    background-image: url("../images/9mai-min/img11.jpg");
    background-position: center top;
}
#index-gallery .img12 {
    grid-area: img12;
    background-image: url("../images/9mai-min/img12.jpg");
}
#index-gallery .img13 {
    grid-area: img13;
    background-image: url("../images/9mai-min/img13.jpg");
}
#index-gallery .img14 {
    grid-area: img14;
    background-image: url("../images/9mai-min/img14.jpg");
    background-position: center top;
}
#index-gallery .img15 {
    grid-area: img15;
    background-image: url("../images/9mai-min/img15.jpg");
    background-position: top left;
}
#index-gallery .img16 {
    grid-area: img16;
    background-image: url("../images/9mai-min/img16.jpg");
    background-position: center top;
}

/* Images stefan cel mare*/

#index-gallery2 .img1 {
    grid-area: img1;
    background-image: url("../images/stefan-min/img1.jpg");
    background-position: 20% 50%;
    height: 1010px;
}
#index-gallery2 .img2 {
    grid-area: img2;
    background-image: url("../images/stefan-min/img2.jpg");
}
#index-gallery2 .img3 {
    grid-area: img3;
    background-image: url("../images/stefan-min/img3.jpg");
    height: 1010px;
}
#index-gallery2 .img4 {
    grid-area: img4;
    background-image: url("../images/stefan-min/img4.jpg");
}
#index-gallery2 .img5 {
    grid-area: img5;
    background-image: url("../images/stefan-min/img5.jpg");
}
#index-gallery2 .img6 {
    grid-area: img6;
    background-image: url("../images/stefan-min/img6.jpg");
}
#index-gallery2 .img7 {
    grid-area: img7;
    background-image: url("../images/stefan-min/img7.jpg");   
}
#index-gallery2 .img8 {
    grid-area: img8;
    background-image: url("../images/stefan-min/img8.jpg");
}
#index-gallery2 .img9 {
    grid-area: img9;
    background-image: url("../images/stefan-min/img9.jpg");
}
#index-gallery2 .img10 {
    grid-area: img10;
    background-image: url("../images/stefan-min/img10.jpg");
}
#index-gallery2 .img11 {
    grid-area: img11;
    background-image: url("../images/stefan-min/img11.jpg");
}
#index-gallery2 .img12 {
    grid-area: img12;
    background-image: url("../images/stefan-min/img12.jpg");
}
#index-gallery2 .img13 {
    grid-area: img13;
    background-image: url("../images/stefan-min/img13.jpg");
}


/* Popup image when clicked*/
.img-window {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    position: fixed;
    top: 0;
    left: 0;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img {
    max-height: 85vh;
    max-width: 85vw;
}

/* Next+Prev buttons imagestyle */

.img-btn-next, .img-btn-prev {
    display: block;
    padding: 16px 20px;
    border-radius: 10px;
    background-color: #005eca;
    position: fixed;
    top: 48vh;
    z-index: 500;
    font-family: Fira Sans, Arial, Helvetica, sans-serif;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.img-btn-next:hover, .img-btn-prev:hover {
    color:#0400fd;
    background-color: #00ccff;
}

 /* -------- media screen --- */

@media screen and (max-width: 1550px){
    #index-gallery {
     grid-template-areas: 
     "img1 img1 img3 img3"
     "img1 img1 img4 img4"
     "img5 img5 img2 img2"
     "img6 img6 img2 img2"
     "img7 img7 img8 img8"
     "img9 img9 img10 img10"
     "img11 img11 img11 img11"
     "img12 img12 img13 img13"
     "img14 img14 img14 img14"
     "img15 img15 img16 img16";
    }

    #index-gallery2 {
        grid-template-areas: 
        "img1 img1 img2 img2"
        "img1 img1 img4 img4"
        "img5 img5 img3 img3"
        "img6 img6 img3 img3"
        "img7 img7 img8 img8"
        "img9 img9 img10 img10"
        "img11 img11 img12 img12"
        "img13 img13 img13 img13";
       }

    #index-gallery .gallery-img {
        height: 450px;
    }

    #index-gallery2 .gallery-img2 {
        height: 450px;
    }

    #index-gallery .img1, #index-gallery .img2 {
        height: 910px;
    }

    #index-gallery2 .img1, #index-gallery2 .img3 {
        height: 910px;
    }
}

@media screen and (max-width: 1050px){   
    #index-gallery .gallery-img {
        height: 400px;
    }

    #index-gallery2 .gallery-img2 {
        height: 400px;
    }
    /* #index-gallery .img1, #index-gallery .img2, #index-gallery .img8 {
        height: 810px;
    } */
    #index-gallery .img1, #index-gallery .img2 {
        height: 810px;
    }

    #index-gallery2 .img1, #index-gallery2 .img3 {
        height: 810px;
    }
}

@media screen and (max-width: 750px){
    #index-gallery {
        grid-template-areas: 
       "img1 img1 img1 img1"
       "img2 img2 img2 img2"
       "img3 img3 img3 img3"
       "img4 img4 img4 img4"
       "img5 img5 img5 img5"
       "img6 img6 img6 img6"
       "img7 img7 img7 img7"
       "img8 img8 img8 img8"
       "img9 img9 img9 img9"
       "img10 img10 img10 img10"
       "img11 img11 img11 img11"
       "img12 img12 img13 img13"
       "img14 img14 img14 img14"
       "img15 img15 img15 img15"
       "img16 img16 img16 img16";
       }

    #index-gallery2 {
        grid-template-areas: 
       "img1 img1 img1 img1"
       "img2 img2 img2 img2"
       "img3 img3 img3 img3"
       "img4 img4 img5 img5"
       "img6 img6 img6 img6"
       "img7 img7 img7 img7"
       "img8 img8 img8 img8"
       "img9 img9 img9 img9"
       "img10 img10 img10 img10"
       "img11 img11 img12 img12"
       "img13 img13 img13 img13";
       }

    #index-gallery .gallery-img {
        height: 300px;
    }

    #index-gallery2 .gallery-img2 {
        height: 300px;
    }

    #index-gallery .img1, #index-gallery .img2 {
        height: 600px;
    }

    #index-gallery2 .img1, #index-gallery2 .img3 {
        height: 600px;
    }

    .img-btn-next, .img-btn-prev {
        top: 85vh;
    }
}