#gallery{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:146px 146px 146px 146px;grid-gap:10px;width:880px}@media(max-width:800px){#gallery{display:flex;align-items:flex-start;flex-wrap:wrap;width:auto}#gallery>div{width:auto;margin:1%}}@media(max-width:800px) and (max-width:350px){#gallery{width:450px}#gallery>div{width:98%}}.div1{grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3}.div7{grid-column-start:2;grid-column-end:4;grid-row-start:3;grid-row-end:5}[id^="lightbox-"]{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);display:flex;opacity:0;transition:opacity 450ms ease-in-out;align-items:center;justify-content:center;pointer-events:none}[id^="lightbox-"]:target{opacity:1;pointer-events:inherit}[id^="lightbox-"]:target img{filter:blur(0)}[id^="lightbox-"] .content{max-width:90%;position:relative;color:#fff}[id^="lightbox-"] .content:hover>a.close{opacity:1;transform:scale(1,1)}[id^="lightbox-"] .content:hover>.title{opacity:1;transform:translateY(-3px)}[id^="lightbox-"] .content:hover>.title::after{opacity:1}[id^="lightbox-"] .content>*{transition:all 450ms ease-in-out}[id^="lightbox-"] .title{display:block;margin:0;padding:1em;position:absolute;bottom:0;width:100%;transform:translateY(50%);font-size:1.5em;opacity:0}[id^="lightbox-"] .title::after{content:' ';background-color:rgba(0,0,0,0.4);bottom:0;left:0;height:100%;width:100%;position:absolute;transition:all 350ms ease-in-out 250ms;opacity:0;transform-origin:bottom;mix-blend-mode:soft-light}[id^="lightbox-"] img{max-height:90vh;max-width:100%;margin:0;padding:0;filter:blur(50px)}[id^="lightbox-"] a.close{width:2em;height:2em;position:absolute;right:0;top:0;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;transform:scale(0,0);opacity:0;transform-origin:right top;text-decoration:none;color:#fff}[id^="lightbox-"] a.close::after{content:"X"}