:root{--accent-color:#8fbc8f;font-family:Iowan Old Style,Palatino Linotype,URW Palladio L,P052,serif;font-weight:400}body{flex-direction:column;min-height:100vh;display:flex}main{flex-direction:column;flex:1;margin-inline:clamp(.5ch,4vw,5em);display:flex}header{background-color:var(--accent-color);color:#fff;text-align:center;grid-template-columns:auto 1fr;padding:.5em 1em;display:grid;& a{justify-self:center;text-decoration:none;transition:all .5s;&:hover,&:focus{background-color:#fff2}}& #photosHome{padding:1em;& h1{align-items:center;gap:1ch;margin:0;display:flex}}& #logo{height:2em;animation:1s cameraFlash}& #backHome{align-self:flex-start}}@keyframes cameraFlash{0%{filter:brightness(4)saturate(0)drop-shadow(0 0 1em #fff)}}@media screen and (width>600px){#photosHome{margin-inline-end:10ch}}@media screen and (width<600px){header{grid-template-columns:1fr}}#albumsList{flex:1;align-items:center;gap:1em;width:100%;max-width:200ch;margin-inline:auto;padding:1em;display:grid}#noAlbums{text-align:center;opacity:.7;align-self:center;font-size:1.5em;font-style:italic;line-height:2}.collCard{border:var(--accent-color) solid 2px;position:relative}.collCard:hover,.collCard:focus-within{& .collMediaPreview>img:nth-of-type(2){scale:1}& .collMediaPreview>img{border:1px solid #fff}}.metadatas{z-index:1;color:#fff;backdrop-filter:blur(10px);transform-origin:0 100%;background-color:#0008;padding:.5em 1em;transition:all .5s;position:absolute;bottom:0;&:after{content:"";inset-block:0;background-image:linear-gradient(90deg,#0008,#0000);width:min(5vw,5em);position:absolute;left:100%}& h2{margin:0}}.collMediaPreview{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;height:30em;transition:all .5s cubic-bezier(.66,0,.34,1) .5s;display:grid;position:relative;&>img{object-fit:cover;border:1px solid #0000;width:100%;height:15em;transition:inherit}& img:nth-of-type(2){transform-origin:0 0;border-width:0;scale:2}}#collectionBlurBg{z-index:-1;filter:blur(10px);width:100%;height:100%;position:absolute;inset:0}