.album-hero { max-width: 900px; padding: 100px 0 70px; }
.album-hero h1 { max-width: 820px; margin-bottom: 20px; font-size: clamp(3rem, 7vw, 6rem); }
.album-hero p:last-child { max-width: 600px; color: var(--muted); font-size: 1.1rem; }
.album-grid { display: grid; grid-template-columns: .72fr 1.28fr; grid-auto-rows: 330px; gap: 16px; padding-bottom: 120px; }
.album-item { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.album-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.album-item:hover img { transform: scale(1.04); }
.album-item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); pointer-events: none; }
.album-item figcaption { position: absolute; z-index: 1; bottom: 20px; left: 20px; display: grid; gap: 3px; }
.album-item figcaption span { color: var(--green); font: 700 .65rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.album-item figcaption strong { font-size: 1rem; }
.album-wide { grid-row: span 2; }
.album-poster img { object-fit: cover; }
@media (max-width: 650px) { .album-hero { padding: 65px 0 45px; } .album-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; padding-bottom: 75px; } .album-wide { grid-row: span 1; } }