html,body{
margin:0;
height:100%;
font-family:Helvetica,Arial,sans-serif;
background:#fff;
color:#111;
overflow:hidden;
}
*{box-sizing:border-box}
.container{
display:grid;
grid-template-columns:40% 60%;
height:100vh;
}
.sidebar{
overflow-y:auto;
padding:40px;
border-right:1px solid #eee;
}
.sidebar h2{
font-size:14px;
text-transform:uppercase;
letter-spacing:.15em;
margin:0 0 30px;
}
.work{
font-size:22px;
margin:0 0 24px;
cursor:pointer;
}
.work:hover{opacity:.6}
.gallery{
overflow-y:auto;
background:#fff;
}

.work-list {
    display: flex;
    flex-direction: column;
}

.work-link {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid #999;
    text-decoration: none;
    color: black;
}

.work-link:last-child {
    border-bottom: none;
}
.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);  /* 3 thumbnails across */
grid-auto-rows: 180px;                 /* Thumbnail height */
gap: 15px;
overflow-y: auto;
}
.gallery img{
width:100%;
height:100%;
aspect-ratio:1/1;
display:block;
object-fit:cover;
cursor:pointer;
transition:transform .2s;
}
.gallery img:hover{transform:scale(1.02)}
.artworkInfo h1{
font-size:34px;
font-weight:400;
margin:40px 0 8px;
}
.gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.description{
line-height:1.7;
max-width:40em;
}
.lightbox{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.92);
}
.lightbox img{
max-width:90vw;
max-height:90vh;
}
#closeLightbox,#previousImage,#nextImage{
position:absolute;
background:none;
border:none;
color:#fff;
cursor:pointer;
font-size:48px;
}
#closeLightbox{top:20px;right:30px}
#previousImage{left:20px;top:50%;transform:translateY(-50%)}
#nextImage{right:20px;top:50%;transform:translateY(-50%)}
.hidden{display:none}
@media (max-width:900px){
.container{grid-template-columns:1fr}
.sidebar{height:40vh}
.gallery{height:60vh}
#gallery{grid-template-columns:repeat(3,1fr)}
}