@media (min-width: 601px) and (max-width: 1024px) {
.side-nav {
position: fixed;
right: 0;
top: var(--header-h);
background: #fff;
width: var(--side-width);
max-width: 70vw;
height: calc(100vh - var(--header-h));
box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
transform: translateX(100%);
transition: transform 0.3s;
overflow-y: auto;
}
.side-nav.open {
transform: translateX(0);
}
.side-nav ul {
flex-direction: column;
padding: 1.5rem 1rem;
}
.hamburger {
display: flex;
}
.major-card {
flex-direction: column;
}
.album {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.bottom-nav {
display: none !important;
}
}