:root {
      --box-y-padding: 5rem;
      --box-x-padding: 2rem;
      --gradient-box-top: #ffe5e0;
      --gradient-box-bottom: #cca5bb;
    }

    @media screen and (min-width:1px) and (max-width: 430px){
      :root{
    --layout-width: 270px;
    --box-y-padding: 1rem;
    --box-x-padding: .5rem;

      }
    }

    @media screen and (min-width:431px) and (max-width: 650px){
      :root{
    --layout-width: 400px;
    --box-y-padding: 3rem;
      }
    }

    @media screen and (min-width:651px) and (max-width: 900px){
      :root{
    --layout-width: 600px;
    --box-y-padding: 1.5rem;
      }
    }
  
  .wrapper-layout{
    background: linear-gradient(180deg, #fff 0%, #fcded8 57%, #fff 100%);
    padding-top: 3rem;
    padding-bottom: 3rem;
    z-index: -99;
  }
  /* ------------------------------------------------------------------------- */
  
  
    .layout {
      display: grid;    
      grid-template-columns: 1.5fr 3fr 3fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: 'img img title' 'img img content' 'img img .';
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
      z-index: 1;
    }
  
    .layout::after {
      content: '';
      grid-column: 2/-1;
      grid-row: 1/3;  
      background: linear-gradient(140deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
      box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      position: relative;
    }


    .layout-reverse {
      display: grid;    
      grid-template-columns: 3fr 3fr 1.5fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: 'title img img' 'content img img' '. img img';
      max-width: 1500px;
      margin-right: auto;
      margin-left: auto;
      padding: 3rem 1rem;
      z-index: 1;
    }
  
    .layout-reverse::after {
      content: '';
      grid-column: 1/-2;
      grid-row: 1/3;  
      background: linear-gradient(240deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
      box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      position: relative;
    }


    .layout-h1 {
      grid-area: title;
      padding-top: var(--box-y-padding);
      padding-left: var(--box-x-padding);
      font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
      font-size: calc(15px + 1vw);
      letter-spacing: 2px;
      text-align: center;
      margin: 0 0 2rem;
      position: relative;
      z-index: 99;
    }
  
    .layout-h1::after {
      left: var(--box-x-padding);
      top: var(--box-y-padding);
    }
   
    .content {
      grid-area: content;
      padding-bottom: var(--box-y-padding);
      padding-left: var(--box-x-padding);
      padding-right: var(--box-x-padding);
      color: #313131;
      margin-top: 0;
      margin-bottom: var(--box-y-padding);
      z-index: 99;
      font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
      font-size: calc(12px + 0.8vw);
      text-align: center;
      line-height: 1.7;
    }
      
  
    .layout-img {
      grid-area: img;
      position: relative;
      z-index: 99;
    }
    
    .layout-img img {
      max-width: 100%;
      vertical-align: middle;
      box-shadow: 0 0.2rem 0.7rem rgba(61,48,41,0.7);
    }
  
  /* ------------------------------------------------------------------ */
  

  @media screen and (min-width:1px) and (max-width: 900px) {
    .layout, .layout-reverse {
        display: grid;    
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 
        'img'
        'title'
        'content';
        max-width: var(--layout-width);
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 3rem;
        padding: 3rem 1rem;
        position: relative;
        z-index: 99;
        background: linear-gradient(130deg, #fff 0%, var(--gradient-box-top) 50%, var(--gradient-box-bottom) 100%);
        box-shadow: 0 0.2rem 1rem rgba(61,48,41,0.5);
      }

      .layout-reverse::after {
        grid-column: -1/-1;
      }

      .layout-h1 {
        grid-area: title;
        padding-top: var(--box-y-padding);
        padding-left: var(--box-x-padding);
        font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
        font-size: calc(15px + 1vw);
        letter-spacing: 2px;
        margin: 0 0 1rem;
        position: relative;
        z-index: 99;
      }
    
      .layout-h1::after {
        left: var(--box-x-padding);
        top: var(--box-y-padding);
      }
    
      .layout p {
        margin-top: 0;
        margin-bottom: var(--box-y-padding);
      }
    
      .content {
        grid-area: content;
        /* padding-bottom: var(--box-y-padding); */
        padding-bottom: 0;

        padding-left: var(--box-x-padding);
        padding-right: var(--box-x-padding);
        color: #313131;
        /* margin-bottom: var(--box-y-padding); */
        margin-bottom: 0;
        z-index: 99;
        font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
        font-size: calc(12px + 0.85vw);
        line-height: 1.6;
      }
    
      .layout-img {
        grid-area: img;
        position: relative;
        z-index: 99;
      }
      
      .layout-img img {
        max-width: 100%;
        vertical-align: middle;
        box-shadow: 0 0.2rem 0.7rem rgba(61,48,41,0.7);
      }
  }

 
  
  
  /*  ==== Gallery + Video layout container ==== */

  .galerie-wrapper-layout{
    position: relative;
    background: linear-gradient(180deg, #76fbc8 5%, #ffa7c4 67%, #aeaed3 90%, #fff 100%);
    padding-top: 3rem;
    padding-bottom: 6rem;
}

.galerie-layout {
    display: grid;    
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    grid-template-areas: 
    'titlu'
    'continut'
    'video'
    'titlu2'
    'continut2';
    margin-right: auto;
    margin-left: auto;
    padding: 1rem 5rem;
}

.galerie-layout-h1 {
    grid-area: titlu;
    font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
    font-size: calc(10px + 1.5vw);
    letter-spacing: 1px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.galerie-layout-h2 {
    grid-area: titlu2;
    font-family: 'YesevaOne', Arial, Helvetica, sans-serif;
    font-size: calc(10px + 1.5vw);
    letter-spacing: 3px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.galerie-continut {
    grid-area: continut;
    font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
    font-size: calc(10px + 1vw);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 20px;
    padding-bottom: 3rem;
    margin: 1rem 4rem;
}

.galerie-continut2 {
    grid-area: continut2;
    font-family: 'MerriweatherSans', Arial, Helvetica, sans-serif;
    font-size: calc(10px + 1vw);
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 20px;
    padding-bottom: 20px;
    margin: 1rem 4rem;
}

.galerie-video {
    grid-area: video;
    position: relative;
    margin: 0 0 50px 0;
    object-fit: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 5rem;
}


.galerie-video video{
    width: 90%;
 }




/* ==== 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 img7 img7 img2"
"img3 img3 img6 img2"
"img8 img8 img9 img9";
}

#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-gallery .gallery-img:hover {
transform: scale(1.01);
}

/* Images */

#index-gallery .img1 {
grid-area: img1;
background-image: url("../images/thumbs/img1.jpg");
height: 1010px;
}
#index-gallery .img2 {
grid-area: img2;
background-image: url("../images/thumbs/img2.jpg");
height: 1010px;
}
#index-gallery .img3 {
grid-area: img3;
background-image: url("../images/thumbs/img3.jpg");
}
#index-gallery .img4 {
grid-area: img4;
background-image: url("../images/thumbs/img4.jpg");
}
#index-gallery .img5 {
grid-area: img5;
background-image: url("../images/thumbs/img5.jpg");
}
#index-gallery .img6 {
grid-area: img6;
background-image: url("../images/thumbs/img6.jpg");
}
#index-gallery .img7 {
grid-area: img7;
background-image: url("../images/thumbs/img7.jpg");   
}
#index-gallery .img8 {
grid-area: img8;
background-image: url("../images/thumbs/img8.jpg");
}
#index-gallery .img9 {
grid-area: img9;
background-image: url("../images/thumbs/img9.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: 'MerriweatherSans', 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 and (min-width:1px) and (max-width: 1000px){
.galerie-layout {
    padding: 1rem calc(1rem + 2vw);
}
}

@media screen and (min-width:1px) and (max-width: 450px){
.galerie-continut, .galerie-continut2 {
    margin: 0 0;
}
}

@media screen and (min-width:451px) and (max-width: 650px){
.galerie-continut, .galerie-continut2 {
    margin: 1rem 2rem;
}
}





@media screen and (max-width: 1550px){
#index-gallery {
 grid-template-areas: 
 "img1 img1 img4 img4"
 "img1 img1 img3 img3"
 "img5 img5 img2 img2"
 "img7 img7 img2 img2"
 "img6 img6 img9 img9"
 "img8 img8 img8 img8";
}
#index-gallery .gallery-img {
    height: 450px;
}
#index-gallery .img1, #index-gallery .img2 {
    height: 910px;
}
}

@media screen and (max-width: 1050px){
#index-gallery .gallery-img {
    height: 400px;
}
#index-gallery .img1, #index-gallery .img2, #index-gallery .img8 {
    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";
   }

#index-gallery .gallery-img {
    height: 300px;
}
#index-gallery .img1, #index-gallery .img2 {
    height: 600px;
}
.img-btn-next, .img-btn-prev {
    top: 85vh;
}
}