aside { position: fixed; top: 0; left: 0; z-index: 30; width: 320px; max-width: 80%; min-height: 100svh; height: 100svh; padding: 72px 24px 24px; background-color: #fff; }
aside.closed { max-height: 100svh !important; padding-top: 72px !important; padding-bottom: 24px !important; transform: translateX(-100%); }

aside .close { position: fixed; top: 24px; left: 24px; height: 24px; width: 24px; transition: .7s ease; }
aside.closed .close { opacity: 0; }
aside .close::before, aside .close::after { content: ""; display: block; position: absolute; top: 50%; left: 0; height: 1.5px; width: 24px; background-color: #fff; transform-origin: 50% 50%; }
aside .close::before { transform: rotate(45deg); }
aside .close::after { transform: rotate(-45deg); }

aside > * { padding: 12px 0; }
aside > *:not(:last-child):not(.close) { border-bottom: 1px solid rgba(255, 255, 255, .7); }

aside.curated li { padding-left: 0; }
aside.curated li::before { display: none; }