main.min.css

@import url(https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap);@import url(https://fonts.googleapis.com/css2?family=Jost&display=swap);*{box-sizing:border-box;font-family:Jost,sans-serif;text-align:center;font-weight:400;margin:auto}body{background-color:#4158d0;background-image:linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%);overflow:hidden}header{width:100%;position:sticky;color:#fafafa;background-color:transparent;z-index:300}#hdr-back{position:absolute;width:100%;height:85px;margin:0;top:0;background-image:linear-gradient(43deg,#4158d0 0,#c850c0 46%,#ffcc70 100%);filter:blur(10px);z-index:200}.close-icon{vertical-align:middle;content:url(assets/img/close.svg);display:inline-block;width:1rem}.download-icon{vertical-align:middle;content:url(assets/img/download.svg);display:inline-block;width:1rem}.expand-icon{vertical-align:middle;content:url(assets/img/expand.svg);display:inline-block;width:1rem}.open-new-icon{vertical-align:middle;content:url(assets/img/open_in_new.svg);display:inline-block;width:1rem}.settings-icon{vertical-align:middle;content:url(assets/img/settings.svg);display:inline-block;width:1rem}h1,h2{margin:auto}div.gallery:hover img{opacity:.4;height:100%;filter:blur(30px)}div.gallery:hover{border:1px solid #7a7adf;display:flex;position:relative;align-items:center;width:102%;left:-1%;font-weight:bolder;color:#fff;background-image:linear-gradient(43deg,#4158d0 0,#c850c0 46%,hwb(39 44% 0) 100%)}div.gallery{display:flex;position:relative;border-radius:2%;width:100%;height:200px;border:none;background-color:#fafafa;box-shadow:0 2px 4px rgba(0,0,0,.269),0 -1px 0 rgba(0,0,0,.02);overflow:hidden;-webkit-transition:width .25s ease;-moz-transition:width .25s ease;-ms-transition:width .25s ease;-o-transition:width .25s ease;transition:width .25s ease}div.gallery img{width:100%;height:auto}div.desc{margin:auto;position:absolute;padding:15px;text-align:center;opacity:0;transition:.25s all ease-in-out}div.desc:hover{opacity:1;background-color:transparent;font-weight:700}a:link,a:visited{text-decoration:none;color:inherit}a:hover{text-decoration:underline;color:#7a7adf}.open-in-osm{display:block;color:#29292b;margin-bottom:5px}.open-in-osm:hover{color:#e2edf1}.open-in-osm .open-new-icon{opacity:0}.open-in-osm:hover .open-new-icon{opacity:1;fill:#e2edf1}#gallery{position:relative;top:0;padding:2%;height:100vh;display:grid;grid-gap:20px;grid-template-columns:repeat(5,1fr);grid-auto-flow:dense;overflow:scroll;scroll-behavior:smooth;z-index:100}#gallery::after{margin-bottom:50px}@media only screen and (max-width:700px){#gallery{display:grid;grid-gap:5px;grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width:500px){#gallery{grid-template-columns:repeat(1,1fr)}}.clearfix:after{content:"";display:table;clear:both}