/* Keep the original artwork and copy in one centered composition. */
@media(min-width:761px){
  .nk-cross-promo--centered{box-sizing:border-box;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);padding-inline:max(24px,calc((100% - 1200px)/2));min-height:560px}
  .nk-cross-promo--centered .nk-cross-promo__copy{min-width:0;padding:48px 24px 48px 0}
  .nk-cross-promo--centered .nk-cross-promo__media{min-height:0;height:560px;align-self:center}
  .nk-cross-promo--centered .nk-cross-promo__media img{-webkit-mask-image:linear-gradient(to right,transparent,#000 18%);mask-image:linear-gradient(to right,transparent,#000 18%)}
}
@media(min-width:761px) and (max-width:1000px){
  .nk-cross-promo--centered{min-height:480px}
  .nk-cross-promo--centered .nk-cross-promo__copy{padding-block:36px}
  .nk-cross-promo--centered .nk-cross-promo__media{height:480px}
}
@media(max-width:760px){
  .nk-cross-promo--centered .nk-cross-promo__copy{box-sizing:border-box;width:100%;max-width:620px;margin-inline:auto;padding:36px 24px 18px}
  .nk-cross-promo--centered .nk-cross-promo__media{width:100%;max-width:620px;margin-inline:auto;height:min(105vw,440px)}
}

/* Fade the right edge into the same banner background on every viewport. */
.nk-cross-promo--centered .nk-cross-promo__media{-webkit-mask-image:linear-gradient(to right,#000 84%,transparent 100%);mask-image:linear-gradient(to right,#000 84%,transparent 100%)}

/* Transparent source: keep the whole figure opaque, without edge fades. */
.nk-cross-promo--cutout .nk-cross-promo__media,.nk-cross-promo--cutout .nk-cross-promo__media img{-webkit-mask-image:none;mask-image:none}.nk-cross-promo--cutout .nk-cross-promo__media{background:transparent}