.response{background: linear-gradient(to bottom, hsla(var(--hue),var(--saturation),var(--lightness),.02) calc(100% - 1px), hsla(var(--hue),var(--saturation),var(--lightness),.13) calc(100% - 1px))}
.banner video{opacity: .55}
            
h1{
    font-family: 'roboto flex',roboto,system-ui,sans-serif;
    font-weight: 610;
    font-stretch: 55%;
    text-transform: uppercase
}
            
main>header p{text-wrap:balance}
.donationItem{flex: 1 1 62%}
            
main>div{
    background-color: hsla(var(--hue),var(--saturation),var(--lightness),.02);
    border-block: 1px solid hsla(var(--hue),var(--saturation),var(--lightness),.13);
}
            
blockquote{
    text-align: center;
    margin-block: 2lh;
    border-block: 1px solid hsla(var(--hue),var(--saturation),var(--lightness),.13);
    padding-block: 1lh;
    color:hsla(var(--hue),var(--saturation),21%,1);
}
            
blockquote:is(:last-child){
    margin-bottom: 0;
    border-block-end: none;
    padding-bottom: 0;
}
            
blockquote p{font-weight: 500}
            
div>section{
    padding-block: 2lh;
    position: relative;
    margin-top: 0;
}
            
div>section:nth-of-type(even)::after{
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc((100vw - 100%)/-2);
    z-index: -1;
    background: url('https://s3.theark.cloud/sp-comm-arkfiles/emails/email_assets/Placeholder.jpg') center / cover no-repeat;
    opacity: .08;
    filter: saturate(1.44);
}
            
h3.h2{margin-bottom: 1lh}
            
@media(max-aspect-ratio:1/1) and (max-width:64em){
    div>section>*{margin-inline:auto}
    div>section div{
        width: min(100%, var(--ch-unit, .56125em) * 62);
    }
}
            
@media(min-aspect-ratio:1/1) and (min-width:64em){
    :root{
        --width:calc(var(--ch-unit) * 50 - 1lh);
        --height:min(var(--width),100vh - (var(--small)*4.618*2) - 2lh)
    }
                
    div>section{
        display: flex;
        gap: 2lh}
                
    div>section>*{flex: 1 1 var(--width)}
                
    div >section>figure{
        height: var(--height);
        position: sticky;
        top: calc((100vh - var(--height))/2)
    }
                
    main>div section:nth-of-type(even)>figure{order: 2}
    div>section>figure img{height: 100%}
    div>section>div{margin-top: 0}
    div>section blockquote{margin-bottom: 0}
}