.city-hero{
    position:relative;
    min-height:540px;
    padding:82px clamp(24px,5.25vw,98px);
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
    background:#000;
    border-bottom:6px solid var(--tp-yellow,#ffc700);
}
.city-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.98) 29%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.28) 70%,rgba(0,0,0,.08) 100%);
}
.city-hero-image{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}
.city-hero-copy{
    position:relative;
    z-index:1;
    width:min(650px,52%);
}
.city-hero .eyebrow{color:var(--tp-yellow,#ffc700)}
.city-hero h1{
    margin:20px 0;
    color:#fff;
    font-size:clamp(55px,6vw,88px);
    line-height:1.03;
}
.city-hero p{
    max-width:640px;
    margin:0 0 30px;
    color:#f1f1f1;
    font-size:18px;
    line-height:1.7;
    text-shadow:0 1px 18px #000;
}
@media(max-width:800px){
    .city-hero{
        min-height:650px;
        padding:270px 24px 55px;
        align-items:flex-end;
    }
    .city-hero::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.94) 42%,rgba(0,0,0,.24) 83%,rgba(0,0,0,.1) 100%)}
    .city-hero-image{object-position:68% center}
    .city-hero-copy{width:100%}
    .city-hero h1{font-size:clamp(48px,13vw,70px)}
    .city-hero p{font-size:16px}
}
@media(max-width:430px){
    .city-hero{min-height:620px;padding:240px 20px 48px}
    .city-hero h1{font-size:47px}
}