.home-mix-spotlight{isolation:isolate;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:1.5rem clamp(2rem,5vw,4.5rem);width:100%;margin:0 0 2rem;padding-block:1rem 2rem;display:grid;position:relative}.home-mix-backdrop{z-index:-1;pointer-events:none;height:min(100%,48rem);position:absolute;inset:0 0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 12% 65%,#0000);mask-image:linear-gradient(#0000,#000 12% 65%,#0000)}.home-mix-backdrop .mix-artwork{aspect-ratio:auto;filter:blur(24px);opacity:.7;width:auto;height:auto;margin:0;position:absolute;inset:-32px}.home-mix-backdrop .mix-artwork img{object-fit:cover}.home-mix-backdrop .mix-artwork-fallback{display:none}.home-mix-backdrop:after{content:"";background:linear-gradient(90deg, rgb(var(--background-rgb) / 75%), rgb(var(--background-rgb) / 68%) 35%, rgb(var(--background-rgb) / 85%) 75%, var(--background));position:absolute;inset:0}.home-mix-section-heading{font:400 clamp(2rem, 3vw, 3.25rem)/1.25 var(--font-display), Impact, sans-serif;text-transform:uppercase;grid-column:1/-1;margin:0}.home-mix-section-heading span{color:inherit}.home-mix-heading{grid-area:2/2;min-width:0}.home-mix-heading .home-mix-title{font:400 clamp(2rem, 3.2vw, 3.25rem)/1.15 var(--font-display), Impact, sans-serif;text-transform:uppercase;overflow-wrap:anywhere;margin:0}.home-mix-heading .home-mix-title a{color:var(--foreground);text-decoration:none}.home-mix-heading .home-mix-title a:hover{color:var(--accent-light)}.home-mix-sidebar{grid-area:2/1/span 2;min-width:0}.home-mix-cover{margin-bottom:0}.home-mix-plays{font:400 .85rem/1.5 var(--font-body), Arial, sans-serif;border-bottom:1px solid rgb(var(--foreground-rgb) / 24%);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;margin-top:.75rem;padding-bottom:1rem;display:flex}.home-mix-plays .featured-duration{white-space:nowrap;align-items:center;gap:.5rem;display:inline-flex}.home-mix-date{white-space:nowrap}.home-mix-plays svg{opacity:.7;flex-shrink:0;width:16px;height:16px}.mix-duration-separator{opacity:.65}.home-mix-artwork{border-radius:8px;display:block;overflow:hidden}.home-mix-artwork .mix-artwork{margin:0}.home-mix-description{border-top:1px solid rgb(var(--foreground-rgb) / 24%);grid-column:2;min-width:0;padding-top:1.5rem}.home-mix-description :is(h2,h3){color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem;font:.75rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.home-mix-description p{white-space:pre-wrap;overflow-wrap:anywhere;max-width:65ch;margin:0 0 1.5rem;line-height:1.8}.home-mix-details-link{color:var(--foreground)}.home-mix-details-link:hover{color:var(--accent-light);text-decoration:none}.home-mix-detail{grid-template-rows:auto 1fr}.home-mix-detail .home-mix-heading{grid-row:1}.home-mix-detail .home-mix-sidebar{grid-row:1/span 2}.home-mix-detail .home-mix-description{grid-row:2}.home-mix-detail .home-mix-description a{color:var(--foreground);text-underline-offset:.25em;text-decoration:underline}@media (min-width:901px){.home-mix-spotlight:not(.home-mix-detail){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem)}.home-mix-spotlight:not(.home-mix-detail)>:is(.home-mix-heading,.home-mix-description){grid-column:2/-1}}@media (max-width:760px){.home-mix-backdrop{opacity:.65;height:min(100%,42rem)}.home-mix-cover .mix-cover-play{width:48px;height:48px}.home-mix-spotlight{grid-template-rows:auto;grid-template-columns:minmax(0,1fr);row-gap:.75rem}.home-mix-section-heading{grid-row:1;margin-bottom:.75rem}.home-mix-sidebar{display:contents}.home-mix-spotlight .home-mix-sidebar>.mix-artwork-motion,.home-mix-spotlight .home-mix-heading,.home-mix-spotlight .home-mix-plays{grid-column:1;justify-self:center;width:min(100%,360px);min-width:0}.home-mix-spotlight .home-mix-sidebar>.mix-artwork-motion{grid-row:2}.home-mix-spotlight .home-mix-heading{grid-row:3;margin-top:.35rem}.home-mix-spotlight .home-mix-plays{grid-row:4;justify-content:flex-start;margin-top:0}.home-mix-spotlight .home-mix-description{border-top:0;grid-area:5/1;margin-top:.75rem;padding-top:0}.home-mix-detail .home-mix-sidebar>.mix-artwork-motion{grid-row:1}.home-mix-detail .home-mix-heading{grid-row:2}.home-mix-detail .home-mix-plays{grid-row:3}.home-mix-detail .home-mix-description{grid-row:4}.home-mix-heading .home-mix-title{font-size:clamp(1.75rem,6vw,2.5rem)}}
