:root{--thumb-width:175px;--thumb-height:calc(var(--thumb-width) / 1.5);--hover-width:350px;--hover-height:calc(var(--hover-width) / 1.5);--z-image:20;--z-hover:100;--z-overlay:150}@media (max-width:1050px){:root{--hover-width:280px}}@media (max-width:750px){:root{--hover-width:240px}}@media (max-width:440px){:root{--hover-width:90vw}}#galerie{width:100%;margin:.5rem auto;padding:0}#galerie ul{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:clamp(1rem,3vw,2rem);justify-items:center}#galerie ul li{position:relative;margin:0;padding:0;width:var(--thumb-width);height:var(--thumb-height);padding:0;list-style:none}#galerie ul li a{display:block;overflow:hidden;width:100%;height:100%;margin-top:0;margin-left:0;transition-property:width,height,margin,z-index,border;transition-duration:.6s;box-shadow:.2rem .2rem .5rem #000;background-color:#fff}#galerie ul li a:focus,#galerie ul li a:hover{position:absolute;width:var(--hover-width);height:var(--hover-height);border:.3rem solid #bdb76b;border-radius:5px;z-index:var(--z-hover);outline:0;margin-left:calc(var(--hover-width)/ -4);margin-top:calc(var(--hover-height)/ -4)}#galerie ul li a img{position:absolute;width:100%;height:100%;z-index:var(--z-image);top:0;left:0;transition-property:width,height,z-index;transition-duration:.5s;object-fit:contain}#galerie ul li a:focus img,#galerie ul li a:hover img{width:100%;height:100%;z-index:var(--z-hover)}#galerie ul li a h2{position:absolute;bottom:100%;opacity:0;transition:opacity .5s ease .4s,bottom .5s ease .4s}#galerie ul li a:focus h2,#galerie ul li a:hover h2{display:inline;opacity:1;bottom:0;color:#fff;left:0;width:100%;height:auto;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:5px;background-color:rgba(0,0,0,.8);background-image:none;background-repeat:repeat;background-attachment:scroll;background-position:0 0;background-clip:border-box;background-origin:padding-box;background-size:auto auto;margin-top:-30px;z-index:var(--z-overlay)}@media (prefers-reduced-motion:reduce){#galerie ul li a,#galerie ul li a h2,#galerie ul li a img{transition-duration:10ms}}@media (max-width:440px){#galerie ul{grid-template-columns:repeat(1,1fr)}}@media (min-width:441px) and (max-width:750px){#galerie ul{grid-template-columns:repeat(2,1fr)}}@media (min-width:751px) and (max-width:1050px){#galerie ul{grid-template-columns:repeat(3,1fr)}}@media (min-width:1301px){#galerie ul{grid-template-columns:repeat(5,1fr)}}@media (min-width:1601px){#galerie ul{grid-template-columns:repeat(6,1fr)}}