main {
display: grid;
grid-template-columns: 1fr 30%;
overflow: hidden;
}

#library {
display: flex;
flex-direction: column;
min-height: 0;
}

#shelves {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 5px 10px;
background-color: var(--yellow);
border-bottom: 1px solid var(--yellow);
flex-shrink: 0;
}

.shelf {
margin-right: 10px;
font-size: 11px;
font-weight: bold;
background: transparent;
color: var(--black);
cursor: pointer;
border: none;
}

.shelf.active {
color: var(--black);
}

#catalog {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 10px 15px;
overflow-y: auto;
}

.catalog-header {
flex-shrink: 0;
margin-bottom: 15px;
}

.catalog-header h1 {
color: var(--yellow);
font-family: MS Gothic, monospace;
font-size: 40px;
line-height: 1;
}

.catalog-header p {
max-width: 600px;

color: var(--grey);
line-height: 1.5;
}

.grid {
column-width: 140px;
column-gap: 10px;
}

.item {
break-inside: avoid;
margin-bottom: 10px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
transition: .2s;
}

.item.click {
border-color: var(--yellow);
}

.item img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
filter:saturate(115%);
}

#viewer {
height: fit-content;
overflow-y: auto;
border-left: 2px solid var(--yellow);
border-bottom: 2px solid var(--yellow);
}

#cover-frame{ width:100%; overflow:hidden; } 
#cover-frame img{ width:100%; height:100%; display:block; object-fit:cover; filter:saturate(115%);} 

#cover-frame.square{ aspect-ratio:1/1; } 
#cover-frame.portrait{ aspect-ratio:2/3; } 
#cover-frame.landscape{ aspect-ratio:4/3; } 
#cover-frame.wide{ aspect-ratio:16/9; } 

.information{ padding: 9px 15px; } 
.information h2{ 
padding: 0; 
font-size: 20px; 
color:var(--yellow); 
background-color: var(--black); 
margin-bottom:5px;
} 
.creator{ 
color:var(--grey); 
margin-bottom:10px; 
} 
.divider{ 
height:2px; 
background:var(--mute);
margin-bottom:15px; 
} 
#type{ 
padding: 0 2px; 
width: fit-content; 
margin-bottom: 10px; 
font-size: 13px; 
font-weight: bold; 
color: var(--black); 
background-color: var(--cyan); 
} 

.field{ 
margin-bottom:20px; 
} 

.field h3{ 
color:var(--grey); 
font-size:13px; 
letter-spacing:2px; 
margin-bottom:5px; 
} 

.field p, 
.field li{ 
line-height:1.3;
color:var(--muted); 
}