#gallery-grid{display:grid;grid-gap:2px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));grid-auto-flow:dense;picture img { aspect-ratio: 1; border-radius: 0; }}#gallery-fullview{div.img-fullview { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; div.img-window{ background: #00000080; picture img { width: 100%; height: calc(100vh - 6rem); padding-top: 6rem; object-fit: contain; max-width: initial; } a.img-button { position: absolute; top: 50vh; } } div.img-metadata { display: inline-block; background: var(--background); overflow-y: auto; padding: 6rem 1rem; @container (width < 720px) { padding: 1rem; } } } div.img-fullview:target { display: grid; grid-template-columns: 1fr; @container (width < 720px){ } } div#gallery-full-ui{ display: none; position: fixed; top: 0; left: 0; padding-top: 6rem; } div.img-fullview:target ~ div#gallery-full-ui{ display: block; }}a.img-button{margin:1rem;.icon { font-size: xx-large; border-radius: 50%; background: #00000080; }}a.img-right{right:0}