.audiobook{position:relative;display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(2.5rem,8vw,9rem);align-items:center;background:#0d0d0d;overflow:hidden}
.audiobook:after{content:"ECHOES";position:absolute;right:-.02em;bottom:-.23em;font-family:Oswald,sans-serif;font-size:clamp(8rem,22vw,23rem);line-height:1;color:rgba(255,255,255,.025);pointer-events:none}
.audio-art{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;background:#171717;box-shadow:24px 24px 0 var(--red)}
.audio-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.12);opacity:.62}
.audio-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 66%)}
.audio-mark{position:absolute;z-index:2;inset:auto 1.5rem 1.5rem;display:flex;flex-direction:column;text-transform:uppercase}
.audio-mark span{color:var(--red);font-size:.68rem;letter-spacing:.24em;font-weight:700}
.audio-mark strong{font-family:Oswald,sans-serif;font-size:clamp(3.6rem,7vw,6.8rem);line-height:1;letter-spacing:-.04em}
.audio-mark small{letter-spacing:.25em;font-size:.7rem}
.audio-copy{position:relative;z-index:1}
.audio-lede{max-width:650px;color:#c5c2bd;font-size:clamp(1.05rem,1.5vw,1.3rem);margin:2rem 0}
.audio-actions{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap}
.audio-actions .button{gap:.7rem}
.audio-actions p{margin:0;color:#777;font-size:.75rem}
@media(max-width:800px){.audiobook{grid-template-columns:1fr}.audio-art{max-width:480px}.audio-copy{padding-top:1rem}}
@media(max-width:600px){.audio-art{box-shadow:12px 12px 0 var(--red)}.audio-actions{align-items:flex-start;flex-direction:column}}