:root{--lightbox-padding:1em;--max-lightbox-width:90vw;--max-picture-width:calc(var(--max-lightbox-width) - 2*var(--lightbox-padding));--max-lightbox-height:90vh;--max-picture-height:calc(var(--max-lightbox-height) - 2*var(--lightbox-padding))}.portfolio{display:grid;// Might want to change the values here with smaller screens;grid:auto / repeat(auto-fit,minmax(15em,1fr));grid-gap:1em;background:#333;padding:1em 1em}.portfolio_item{position:relative;flex-basis:30%;margin:0;padding:0;background:white}.portfolio_button{width:100%}.portfolio_image,.portfolio_lightbox_image{object-fit:cover;width:100%;height:100%;display:block}.portfolio_lightbox{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;display:none}.portfolio_lightbox:target{display:flex}.portfolio_lightbox_content{padding:var(--lightbox-padding);background:black;position:relative;max-width:var(--max-lightbox-width);max-height:var(--max-lightbox-height)}.portfolio_lightbox_image{max-width:var(--max-picture-width);max-height:var(--max-picture-height)}.close{position:absolute;right:-1em;top:-1em;border:white 2px solid;display:flex;width:2em;height:2em;background:red;border-radius:50%;align-items:center;justify-content:center;text-decoration:none}.close::after{content:'x';color:white}