.release-mockups{
 display:grid;
 width:100%;
 min-width:0;
 gap:clamp(14px,calc(22px * var(--ref,1)),30px);
}

.release-mockup{
 --release-surface:#2c417a;
 --release-ink:#fff;
 margin:0;
 min-width:0;
 overflow:hidden;
 border-radius:6px;
 background:var(--release-surface);
 color:var(--release-ink);
 text-transform:none;
 letter-spacing:normal;
}

.release-mockup--soundcloud{
 --release-surface:linear-gradient(135deg,#354b36,#596d43 72%,#435540);
}

.release-mockup--grounding{
 --release-surface:#94a5d4;
 --release-ink:#19182a;
}

.release-mockup__bar{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:4px 12px;
 min-height:34px;
 padding:4px 12px;
 background:#1c1b1d;
 color:#fff;
 font-family:var(--mono,monospace);
 font-size:calc(8px * var(--ref,1));
 line-height:1.4;
}

.release-mockup__bar > a{
 display:flex;
 align-items:center;
 min-height:28px;
 gap:5px;
 max-width:100%;
 color:#fff;
 white-space:nowrap;
}

.release-mockup__bar > a:hover,
.release-mockup__bar > a:focus-visible{
 color:var(--accent,#e9f056);
}

.release-mockup__body{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 align-items:center;
 gap:clamp(12px,calc(17px * var(--ref,1)),22px);
 padding:clamp(12px,calc(15px * var(--ref,1)),20px);
 min-width:0;
}

.release-mockup__cover{
 display:block;
 width:100%;
 min-width:0;
 max-width:100%;
 aspect-ratio:1;
 border:0;
 padding:0;
 background:transparent;
}

.release-mockup__cover img{
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
}

.release-mockup__details{
 min-width:0;
 font-family:var(--sans,Arial,sans-serif);
}

.release-mockup .release-mockup__title{
 margin:0;
 font-family:inherit;
 font-size:clamp(15px,calc(19px * var(--ref,1)),26px);
 font-weight:600;
 line-height:1.12;
 letter-spacing:-.02em;
 text-wrap:balance;
}

.release-mockup .release-mockup__artist{
 margin:7px 0 0;
 font-size:clamp(10px,calc(11px * var(--ref,1)),14px);
 line-height:1.3;
}

.release-mockup--soundcloud .release-mockup__artist{
 margin:0 0 5px;
}

.release-mockup .release-mockup__kind,
.release-mockup__facts,
.release-mockup__credit{
 font-family:var(--mono,monospace);
 font-size:clamp(8px,calc(8px * var(--ref,1)),11px);
 line-height:1.45;
}

.release-mockup .release-mockup__kind{
 margin:0 0 8px;
}

.release-mockup__facts{
 display:flex;
 justify-content:space-between;
 gap:4px 12px;
 margin-top:12px;
}

.release-mockup__credit{
 margin:10px 0 0;
}

.release-mockup__credit dt{
 opacity:.78;
}

.release-mockup__credit dd{
 margin:1px 0 0;
}

.release-mockup__wave{
 display:grid;
 grid-template-columns:repeat(64,minmax(0,1fr));
 align-items:end;
 gap:1px;
 height:28px;
 margin-top:17px;
}

.release-mockup__wave > span{
 height:var(--amplitude);
 background:rgba(255,255,255,.76);
}

.release-mockup--soundcloud .release-mockup__facts{
 margin-top:5px;
}

@media(max-width:850px){
 .release-mockup__body{grid-template-columns:minmax(0,1fr)}
 .release-mockup__cover{order:-1}
 .release-mockup__bar{min-height:42px}
 .release-mockup__bar > a{min-height:34px}
}