/* ################### DEBUG ###############*/

/* #div_gallery_img.landscape{
    border:2px solid green;
}

#div_gallery_img.portrait{
    border:5px solid red;

} */


/* MAIN */

:root{
    --font-size_gallery_but: 72pt;
    --font-size_gallery_desc: 28pt;
    --font-size_gallery_counter: 18pt;
    --bg-color_gallery:#000;
    --font-color_gallery_ui:#FFF;
    --font-color_gallery_desc:#FFF;
}

#div_gallery_grid{
    display:grid;
    grid-template-columns: 10vw auto 10vw;
    grid-template-rows:10vw auto 3vw 3vw;
    width:100%;
    height:100%;
    visibility: hidden;
    position:fixed;
    z-index:1010;
    margin:0;
}

/* *{
    border:1px solid red;
}
 */

#div_gallery_bg{
    background-color:var(--bg-color_gallery);
    visibility: hidden;
    width:100%;
    height:100%;
    z-index:1002;
    position:fixed;
    opacity: 0.8;
}

/* UI NICHT SELEKTIERBAR MACHEN*/

#div_gallery_prev,
#div_gallery_next,
#div_gallery_close,
#div_gallery_close_x,
#div_gallery_img,
#img_gallery,
#div_gallery_desc,
#div_gallery_counter{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#div_gallery_prev,
#div_gallery_next{
    display: grid;
    grid-template-rows: auto 2vw auto;
    grid-row:1/5;
    visibility: hidden;
    z-index:1003;
    justify-content: center;
    align-items: center;
    background-color:var(--bg-color_gallery);
    font-size:var(--font-size_gallery_but);
    color:var(--font-color_gallery_ui);
    opacity: 0.2;
}


#div_gallery_close{
    height: 7vw;
    width: 7vw;
    background-color: var(--bg-color_gallery);
    color:var(--font-color_gallery_ui);
    opacity:0.6;
    border-radius: 50%;
    display: inline-block;
    visibility: hidden;
    z-index:1004;
    grid-column:2;
    grid-row:1;
    right:10vw;
    position:absolute;
    font-size:5vw;

}

#div_gallery_close_x{
    top:50%;
    left:50%;
    transform:translate(28%,5%);   
}

#div_gallery_prev:hover,
#div_gallery_next:hover,
#div_gallery_close:hover{
    background-color: var(--font-color_gallery_ui);
    color: var(--bg-color_gallery);
    opacity: 0.2;
}


#div_gallery_img{
    visibility: hidden;
    grid-column:2;
    grid-row:1/3;
    display:flex;
    justify-content: center;
    align-items: center;
    width:fit-content;
    height:fit-content;
    width:100%;
    height:100%;
}

#img_gallery{
    max-height: 40vw; 
    width: auto; 
    max-width:80vw;
}


#div_gallery_desc{
/*     background-color:red; */
    visibility:hidden;
    color:var(--font-color_gallery_desc);
    font-size: var(--font-size_gallery_desc);
    text-align:center;
    grid-column:2;
    grid-row:3;
  /*   bottom:-6vw; */
}

#div_gallery_counter{
    visibility:hidden;
    color:var(--font-color_gallery_desc);
    font-size: var(--font-size_gallery_counter);
    text-align:center;
    grid-column:2;
    grid-row:4;
}