/* The first banner's gradual fade, limited to each image's clear space. */
@media(min-width:768px){
#home-draft :is(.hd-bonus-photo,.ha-photo) img{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.5) 14%,#000 28%);mask-composite:add}
#home-draft .hd-bonus::before{background:linear-gradient(90deg,rgba(250,249,246,.85),rgba(250,249,246,.65) 30%,rgba(250,249,246,.15) 52%,transparent 66%)}
#home-draft .hd-approval::before{background:linear-gradient(90deg,rgba(249,247,243,.85),rgba(249,247,243,.65) 30%,rgba(249,247,243,.15) 52%,transparent 66%)}
}
@media(min-width:901px){
#home-draft .hf-photo{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.5) 7%,#000 14%)}
}
@media(min-width:1001px){
#home-draft :is(.ht-photo,.hi-photo) img{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.5) 14%,#000 28%)}
#home-draft :is(.hd-deadline,.hd-installment)::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--hero-fade-color)/.85),rgb(var(--hero-fade-color)/.65) 30%,rgb(var(--hero-fade-color)/.15) 52%,transparent 66%)}
#home-draft .hd-deadline{--hero-fade-color:250 248 245}
#home-draft .hd-installment{--hero-fade-color:248 249 246}
#home-draft :is(.ht-copy,.hi-copy){position:relative;z-index:1}
}