body,html{padding:0;margin:0;font-family:sans-serif;font-size:24px;background-color:#fff}:root{--highlight:#64c8c8;--lightbox-bg:#e6e6e6;--details-bg:hsla(0,0%,39.2%,0.8)}a{color:inherit;text-decoration:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}.main-container.no-overflow{height:0;max-height:0;min-height:0;overflow:hidden}main{display:flex;flex-flow:row wrap;justify-content:space-around;align-content:space-around;align-items:center;min-height:90vh}.image-thumbnail{position:relative;flex:1 1;width:90vw;min-width:90vw;max-width:90vw;height:90vw;min-height:90vw;max-height:90vw;margin:10px 0;border:.1rem solid var(--lightbox-bg);cursor:pointer}.image-thumbnail:hover{border:.1rem solid var(--highlight);-webkit-box-shadow:0 0 10px 1px rgba(0,0,0,.4);box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.image-details{position:absolute;height:0;overflow:hidden;padding:0;font-size:12px;background-color:var(--details-bg);-webkit-transition:padding .4s,height .4s,border .4s,border-radius .4s;transition:padding .4s,height .4s,border .4s,border-radius .4s;width:100%;color:#fff;bottom:0}.image-thumbnail:hover .image-details{height:auto;padding:20px}.lightbox{position:fixed;top:0;left:0;width:100vw;max-width:100vw;min-width:100vw;height:100vh;max-height:100vh;min-height:100vh;background-color:var(--lightbox-bg)}.lightbox .image-lightbox{width:100%;height:100%;position:relative}button.next,button.previous{position:absolute;z-index:1;border-radius:50%;width:30px;height:30px;border:2px solid #fff;cursor:pointer}button.next:after,button.previous:after{content:"";position:absolute;display:flex;top:-2px;left:-1px;justify-content:center;align-items:center;width:100%;height:100%;font-family:sans-serif;font-size:22px;color:#fff}button.previous{top:5px;left:5px}button.next{bottom:5px;right:5px}button.previous:after{content:"<"}button.next:after{content:">";left:2px}button.next:hover,button.previous:hover{background-color:var(--highlight)}footer{background-color:var(--lightbox-bg);height:10vh;flex-flow:row wrap;justify-content:space-between;align-content:stretch}footer,footer a{display:flex;align-items:center}footer a{padding:20px;background-color:rgba(0,0,0,.1);font-weight:100;font-size:14px;flex:1 1;text-align:center;cursor:pointer;color:#fff;height:100%;min-width:200px;flex-flow:column nowrap;justify-content:center}footer a:hover{background-color:var(--highlight)}@media screen and (min-width:500px){main{min-height:calc(100vw + (4vw / 3 / 2))}.image-thumbnail{width:32vw;min-width:32vw;max-width:32vw;height:32vw;min-height:32vw;max-height:32vw;margin:calc(4vw / 3 / 2) 0}.image-details{font-size:14px}footer{height:auto}button.next,button.previous{width:50px;height:50px;top:calc(50% - 25px)}button.next:after,button.previous:after{-webkit-transform:scaleY(2);transform:scaleY(2);font-size:24px;top:-4px;left:-2px}button.next:after{left:2px}button.previous{left:20px}button.next{left:unset;right:20px}}