/* music.css v0.1 (jay 2026.10.20, v0.1) */
body.board .covers{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;--gw:min(1100px,calc(100vw - 16px));width:var(--gw);max-width:none;flex:none;align-self:auto;margin:var(--habit-gap,16px) calc((100% - var(--gw)) / 2) 0}
@media (min-width:760px){body.board .covers{grid-template-columns:repeat(5,1fr);gap:6px}}
@media (min-width:1100px){body.board .covers{grid-template-columns:repeat(6,1fr)}}
body.board .covers li{position:relative;aspect-ratio:1;overflow:hidden;background:rgba(var(--bg-rgb),.6)}
body.board .covers a{display:block;width:100%;height:100%;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
body.board .covers img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none}
body.board .covers .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-family:var(--mono);font-size:10px;font-style:italic;line-height:1.25;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .15s;pointer-events:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (min-width:760px){body.board .covers .cap{font-size:11px}}
@media (hover:hover){body.board .covers a:hover .cap{opacity:1}}
body.board .covers a:focus-visible .cap,body.board .covers a.show .cap{opacity:1}
body.board .covers a:focus-visible{outline:2px solid var(--c);outline-offset:-2px}