/* Keep the photography vivid while creating a focused reading area. */
.hero-slide:before{
    background:
        linear-gradient(90deg,rgba(22,4,11,.86) 0%,rgba(43,8,22,.68) 27%,rgba(52,10,27,.22) 52%,transparent 72%),
        linear-gradient(0deg,rgba(15,3,8,.34) 0%,transparent 34%);
}
.hero-slide:after{
    height:155px;
    background:linear-gradient(transparent,rgba(18,3,9,.25));
}
.hero-slide .hero-copy{
    max-width:720px;
    padding:78px 0 105px;
}
.hero-copy h1{
    max-width:690px;
    margin-bottom:16px;
    text-shadow:0 3px 5px rgba(0,0,0,.45),0 16px 42px rgba(0,0,0,.28);
}
.hero-copy>p:not(.eyebrow){
    max-width:610px;
    margin:0 0 25px;
    color:#fff;
    font-weight:500;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hero-copy .eyebrow{
    padding:7px 12px;
    border-radius:999px;
    background:#f0c868;
    color:#32131e;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    letter-spacing:.13em;
}
.hero-copy .eyebrow:before{background:#7b1d40}
@media(min-width:901px){
    .hero-slide{background-position:center 38%}
}
@media(max-width:900px){
    .hero-slide:before{
        background:linear-gradient(0deg,rgba(20,4,11,.92) 0%,rgba(34,7,18,.58) 48%,rgba(20,4,11,.08) 78%);
    }
    .hero-slide .hero-copy{
        align-self:flex-end;
        padding:190px 0 92px;
    }
    .hero-copy h1{font-size:clamp(39px,11vw,62px)}
}
@media(max-width:560px){
    .hero-copy .eyebrow{font-size:11px}
    .hero-copy>p:not(.eyebrow){font-size:16px}
    .hero-copy .button{padding:12px 17px}
}