.gallery{--gap:14px;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:clamp(56px,7vw,96px);display:grid}.gallery__head{justify-content:space-between;align-items:end;gap:16px;display:flex}.gallery__head>div:first-child{gap:8px;display:grid}.gallery__lead{max-width:56ch;margin:0}.gallery__nav{align-items:center;gap:6px;display:flex}.gallery__count{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:10px}.gallery__count b{color:var(--ink-2);font-weight:600}.gallery__btn{border:1px solid var(--rule);width:44px;height:44px}.gallery__btn:disabled{opacity:.35;cursor:default}.gallery__track{gap:var(--gap);scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-block:0;padding:4px 0 12px;list-style:none;display:flex;overflow-x:auto}.gallery__track::-webkit-scrollbar{display:none}.gallery .card-li{flex:0 0 calc((100% - 3 * var(--gap)) / 4);scroll-snap-align:start;display:grid}.gallery .card{border-radius:var(--radius-lg);background:var(--ground,#15121a);color:#efe9dd;transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);grid-template-rows:auto 1fr;text-decoration:none;display:grid;position:relative;overflow:hidden}.gallery .card:hover{color:#efe9dd;box-shadow:var(--shadow-pop);transform:translateY(-4px)}.gallery .card--light,.gallery .card--light:hover{color:#15121a}.gallery .card:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--card-edge,transparent), inset 0 1px 0 var(--card-top,transparent);transition:box-shadow var(--dur-base);position:absolute;inset:0}:root[data-theme=dark] .gallery{--card-edge:#efe9dd21;--card-top:#efe9dd42}:root[data-theme=dark] .gallery .card{box-shadow:0 12px 30px #00000080}:root[data-theme=dark] .gallery .card:hover{--card-edge:color-mix(in oklab, var(--gold) 60%, transparent);--card-top:color-mix(in oklab, var(--gold) 75%, transparent);box-shadow:0 20px 46px #0000009e}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .gallery{--card-edge:#efe9dd21;--card-top:#efe9dd42}:root:not([data-theme=light]) .gallery .card{box-shadow:0 12px 30px #00000080}:root:not([data-theme=light]) .gallery .card:hover{--card-edge:color-mix(in oklab, var(--gold) 60%, transparent);--card-top:color-mix(in oklab, var(--gold) 75%, transparent);box-shadow:0 20px 46px #0000009e}}.gallery .card__art{aspect-ratio:9/10;display:block;position:relative;overflow:hidden}.gallery .card__art img{object-fit:cover;object-position:70% 30%;width:100%;height:100%;transition:transform .7s var(--ease-out);display:block}.gallery .card:hover .card__art img{transform:scale(1.05)}.gallery .card__art:after{content:"";background:linear-gradient(0deg, var(--ground), transparent);height:45%;position:absolute;inset:auto 0 0}.gallery .card__body{align-content:start;gap:4px;margin-top:-26px;padding:0 16px 18px;display:grid;position:relative}.gallery .card__body:before{content:"";background:var(--seg);opacity:.9;border-radius:2px;height:3px;position:absolute;top:-8px;left:16px;right:16px}.gallery .card__meta{opacity:.72;align-items:baseline;gap:8px;font-size:13px;display:flex}.gallery .card__num{opacity:1;font-weight:600}.gallery .card__dur{margin-left:auto}.gallery .card__latin{font:italic 500 25px/1.1 var(--display)}.gallery .card__title{opacity:.78;font-size:14px;line-height:1.35}.gallery .a-mozart-complete{--seg:#efe9dd}.gallery .a-mozart-sketch{--seg:#a39cb0}.gallery .a-break{--seg:#e5808f}.gallery .a-suessmayr{--seg:#8f8573}.gallery .a-mozart-returned{--seg:#a39cb0}.gallery .card--light.a-mozart-returned{--seg:#484151}@media (max-width:1100px){.gallery .card-li{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}@media (max-width:860px){.gallery .card-li{flex-basis:calc((100% - var(--gap)) / 2)}}@media (max-width:760px){.gallery__nav{display:none}.gallery .card-li{flex-basis:54vw}.gallery{padding-bottom:clamp(64px,12vw,88px)}.gallery__strip{min-width:0;max-width:none;padding-inline:0}.gallery__track{padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);--gap:12px}.gallery .card__body{gap:3px;margin-top:-22px;padding:0 13px 14px}.gallery .card__body:before{left:13px;right:13px}.gallery .card__meta{font-size:12px}.gallery .card__latin{font-size:21px}.gallery .card__title{font-size:13px}}
