.hero {background: var(--secondary);overflow: hidden;}
.hero a {display: flex;color: var(--black);}
.hero figure { display: flex; position: relative; width: 60%;}
.hero figure img { position: absolute; object-fit: cover; inset:0; width: 100%; height: 100%;}
.hero figcaption {display: flex;align-items: center;justify-content: center;padding: 5rem 4%;flex: 1;}
.hero figcaption h1,.hero figcaption h2 {font-family: "Charter2",serif;font-weight: 900;font-size: 2.4rem;margin: 0 0 1rem;}
.hero figcaption strong {font-size: var(--fontSize-Medium);line-height:1.6;display: -webkit-box;margin-bottom: 2rem;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.hero figcaption span { font-family: var(--fontGraphikCondensed); display: block; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.3rem;}

.inner .hero {margin: 3rem 0;width: 100%;}
.inner .hero a{ flex-direction: row-reverse;}
.inner .hero figcaption{ padding: 3rem 2rem;}

@media (max-width:980px){
    .hero figure { width:50%}
    .hero figure  img{ object-position:10%}
}

@media (max-width:720px){
    .hero figure { width:100%;aspect-ratio:16/12}
    .hero figure img{ aspect-ratio:16/12}
    .hero a{ flex-direction:column-reverse}
    .hero figcaption,.inner .hero figcaption{padding: 1.5rem;}
    .inner .hero a{ flex-direction: column-reverse;}
    .hero figcaption h1, .hero figcaption h2{ font-size:2.2rem}
}