main>header.no-img{padding: 2.618em 1em}

h1,h2,h3,blockquote p{
    font-family: 'libre baskerville',georgia,serif;
    font-weight: 400
}
            
h1{
    position: relative;
    margin-block: 1ch;
}
            
h1::before,h1::after{
    content: '';
    display: block;
    width: calc(28% - .35ch);
    height: calc(100% - .88ch);
    position: absolute;
    top: .35ch;
    border-block:1px solid #000
}
            
h1::before{left: 0}
h1::after{right: 0}
            
h1 span{
    margin-inline: auto;
    display: block;
    width: fit-content;
    line-height: 1.236;
    position: relative
}
            
h1 span:nth-of-type(1){
    font-family: 'roboto flex';
    font-stretch: 30%;
    font-weight: 600;
    font-size: var(--base-unit);
    text-transform: uppercase;
}
            
h1 span:nth-of-type(2){font-style: italic}
h1 span:nth-of-type(3){font-size: var(--h3)}
            
h3{
    margin-inline: auto;
    text-align: center;
    position: relative;
    width: 100%;
}
            
h3::before{
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    top: -1.618em;
    left: calc(50% - .5em);
    background-color: #555;
    clip-path: polygon(19% 33%, 48% 33%, 48% 0%, 52% 0%, 52% 33%, 81% 33%, 81% 37%, 52% 37%, 52% 100%, 48% 100%, 48% 37%, 19% 37%);
}
            
h3::after{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #555;
    position: absolute;
    top: 50%;
    left: 0;
}
            
h3 span{
    background-color: #fdfcfb;
    position: relative;
    z-index: 9;
    padding-inline:1ch
}
            
blockquote{
    border-left: none;
    padding-left: 0
}
            
blockquote p{text-wrap:balance}
section:not(:first-of-type) blockquote p,
section:not(:first-of-type) blockquote footer{text-align: center}
            
main>section:first-of-type>div:last-of-type p:last-of-type{
    font-family: 'libre baskerville',georgia,serif;
    margin-block:4.236em 2.618em;
    text-align: center;
    text-wrap:balance
}
            
section>section{margin-top: 5lh}
.grid.two:has(iframe) img{aspect-ratio: 1.777/1}
section{position: relative}
            
main>section:first-of-type::after{
    content: '';
    display: block;
    width: 100%;
    height: 100vmin;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url(../img/2524US-E2-075.jpg);
    background-size: cover;
    background-position: top center;
    opacity: .3;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0)0%,rgba(0,0,0,1)100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0)0%,rgba(0,0,0,1)100%)
}
            
aside .card{
    position: relative;
    overflow: clip
}
            
aside .card li{
    display: flex;
    align-items: center;
    gap: 1ch
}
            
.number{
    text-align: right;
    font-family: 'roboto flex';
    font-weight: 600;
    font-stretch: 30%;
    font-size: var(--h1);
    line-height: 1;
    width: 5ch
}
            
aside .card img{
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    -wwebkit-mask-image: linear-gradient(to top, rgba(0,0,0,0)0%,rgba(0,0,0,.5)80%,rgba(0,0,0,1)90%);
    mask-image: linear-gradient(to top, rgba(0,0,0,0)0%,rgba(0,0,0,.5)80%,rgba(0,0,0,1)90%);
    object-position: 0% 0%;
            }
            
aside .card article{
    position: relative;
    margin: 20% auto 0
}
            
.number-desc{
    font-size: var(--small);
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 500;
    font-stretch: 50%;
    text-align: left
}
            
.number span{
    font-size: var(--h2);
    font-weight: 400;
    position: relative;
    top: -.7ch
}
            
.number-desc small{
    text-transform: none;
    font-weight: 400;
    font-stretch: 100%;
    line-height: 1;
    color: #555
}