/* Photographic media documentation heroes */
.media-product-hero{
    min-height:clamp(300px,62vw,350px);
    height:auto;
    background-color:#dedbd4;
    background-image:linear-gradient(180deg,rgba(15,22,18,.01) 0%,rgba(15,22,18,.02) 48%,rgba(15,22,18,.15) 72%,rgba(15,22,18,.52) 100%),
        linear-gradient(90deg,rgba(15,22,18,.10) 0%,rgba(15,22,18,.03) 48%,rgba(15,22,18,0) 80%),
        var(--media-product-photo-css,var(--media-product-photo));
    background-size:cover;
    background-repeat:no-repeat;
    background-position:var(--media-product-position,center center);
    justify-content:flex-end;
    padding:var(--space-6) var(--space-5);
}
.media-product-hero--soundbar{--media-product-photo-css:url('../images/sb20-tv-wall.webp');--media-product-position:center 40%}
.media-product-hero--nr850{--media-product-photo-css:url('../images/nr850-cabinet.webp');--media-product-position:center 43%}
.media-product-hero__nav{top:max(18px,env(safe-area-inset-top))}
.media-product-hero__nav .icon-button{
    color:#fff;
    background:rgba(18,26,22,.26);
    border:1px solid rgba(255,255,255,.28);
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.media-product-hero__copy{
    max-width:84%;
    text-shadow:0 2px 14px rgba(0,0,0,.66);
}
.media-product-hero__copy small,
.media-product-hero__copy span{opacity:.98}

@media(max-width:420px){
    .media-product-hero{
        min-height:300px;
        height:auto;
        padding:var(--space-6) var(--space-4);
    }
    .media-product-hero--soundbar{--media-product-position:center 40%}
    .media-product-hero--nr850{--media-product-position:center 43%}
    .media-product-hero__copy{max-width:88%}
}