:root{
    --base-unit:clamp(1rem, 0.5vw + 1rem, 2rem);
}

main{
    color: #333;
    background-color: #f3f2f1;
}

main>*>*{margin-inline: max(1em,((100% - 62ch) / 2))}

h1,h2,blockquote{
    font-family: 'roboto flex';
    font-family: 'libre baskerville',georgia,serif;
    font-stretch: 150%
}

.x-scroll-container{
    overflow: hidden;
    width: 100%;
    margin: 0;
    height: 62dvh;
    position: sticky;
    top: 0;
}

@media (max-aspect-ratio:1/1){
    :root{
        --video-height:calc((100% - max(1em,((100% - 62ch) / 2)))*.5625);
        --x-scroll-margin:calc(100vh - var(--video-height));
    }
    .x-scroll-container{
        margin-bottom: calc(var(--di-height) + 4.236em);
        margin-bottom: 3.618em;
        margin-bottom: 0
    }
    
    section{
        margin-top: calc((62vh - 62svh)*-1);
    }
}
            
.x-scroller{
    height:100%;
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    margin: 0;
}

.x-scroller>*{
    flex: 0 0 100%;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: calc(62dvh * .382);
}
            
.x-scroller>*:first-of-type{
    padding-bottom: calc(62dvh * .236);
}

.x-scroller figure{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 62dvh;
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,.35)20%,rgba(0,0,0,1)calc(62vh * .382));
    mask-image:linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,.35)calc((62vh * .382)*.5),rgba(0,0,0,1)calc(62vh * .382));
}
            
.x-scroller img{
    aspect-ratio: unset;
    object-fit: cover;
    height: 100%;
}

.x-scroller>*:last-of-type>div{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block:1em;
    padding-inline:max(1em,((100% - 62ch) / 2));
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5;
}

html[lang="es"] .x-scroller>*:last-of-type>div[lang="en"],
html[lang="en-US"] .x-scroller>*:last-of-type>div[lang="es"]{display: none!important}
html[lang="es"] .x-scroller>*:last-of-type>div[lang="es"]{display: flex!important}

.x-scroller>*:last-of-type>div>div{
    border-radius: .382em;
    box-shadow:0 0 1.618em rgba(0,0,0,.1),0 .09em .146em rgba(0,0,0,.1),.09em .146em .236em rgba(0,0,0,.1),.146em .236em .382em rgba(0,0,0,.1),.236em .382em .618em rgba(0,0,0,.1),.382em .618em 1em rgba(0,0,0,.1);
}

.x-scroller>*:last-of-type iframe{
    border-radius: .382em;
}

.x-scroller>*:last-of-type figure::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    z-index: 0;
    backdrop-filter: blur(8px);
    background-color:rgba(243,242,241,.5);
}

@media(min-aspect-ratio:1/1){
    main{display: flex}
    main>*{flex: 1 1 32rem}    
    header h2{text-align: center!important}
    
    .x-scroll-container{
        order: 2;
        height: 100vh;
    }
    
    @media(min-width:64rem){
        .x-scroll-container{
            margin-top: -112px
        }
    }
    
    .x-scroller>*:last-of-type{
        padding-bottom: 0;
    }
    
    .x-scroller>*:last-of-type figure::after{
        backdrop-filter: blur(13px);
        border-left: 1px solid #ddd
    }
    
    .x-scroller>*:last-of-type>div{
        justify-content: center;
    }
    
    .x-scroller figure{
        height: 100%;
        -webkit-mask-image:none;
        mask-image:none
    }
    
    .x-scroller h1{display: none}
    section{
        order: 1;
    }
    
    section header+div{margin-top: min(var(--hgroup-height) - 100vh,0)}
    
    section header hgroup{
        height: max(var(--hgroup-height) + 2em,100vh - var(--nav-2));
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block: 1em;
    }
    
    header h1{
        display: block!important;
        text-shadow: none;
        color: #333
    }
    
    header h2{
        margin-top: 8vh!important;
        text-align: center
    }
    
    blockquote p{
        text-wrap:balance
    }
                
    @supports (animation-timeline: scroll(block nearest)){
        @keyframes height{
            to {height: 100vh}
        }
                    
        .x-scroll-container{
            margin-top: 0;
            view-timeline:--x-scroll-container-fig
        }
                    
        .x-scroller{
            height: calc(100vh - var(--nav-2));
            animation:1s height linear both;
            animation-timeline: --x-scroll-container-fig;
            animation-range: cover calc(100vh - var(--nav-2)) entry-crossing 100%;
        }
        
        .x-scroller>*:first-of-type,
        .x-scroller>*:first-of-type figure{
            top: 0
        }
    }
}
            
/*HIDE SCROLLBAR*/
.x-scroller{scrollbar-width:0;scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0)}.x-scroller::-webkit-scrollbar{width: 0;height: 0}.x-scroller::-webkit-scrollbar-thumb{background:rgba(0,0,0,0)}.x-scroller::-webkit-scrollbar-track{background:rgba(0,0,0,0)}
            
h1{
    font-size: 1em;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 9;
    text-shadow:0 0 1ch rgba(0,0,0,.3),0 .146ch .236ch rgba(0,0,0,.3),.146ch .236ch .382ch rgba(0,0,0,.3),.236ch .382ch 0.79ch rgba(0,0,0,.3);
}
            
h1>span{
    display: block;
    font-size: var(--h1);
    line-height: .85;
    font-weight: 700;
    text-transform: uppercase;
}
            
h1>span>span{
    font-size: var(--h2);
    position: relative;
    top: -.43em
}

.x-scroller>*:first-of-type,
section{
    width: 100%;
    container-name:section;
    container-type:inline-size
}
         
h2{
    font-weight: 400;
    margin-top: 4.236em;
    text-align: center;
    text-wrap:balance
}
            
header h2{
    font-size: 1em;
    line-height: 1.382;
    color: #000;
    margin-top: -.5lh;
    margin-top: 0;
    text-align: left
}

@container section (width > 29em){
    header h2{
        font-size: var(--h3);
        margin-top: -1lh
    }
}

@container section (width > 44em){
    h1{font-size: var(--h3)}
    h1>span{font-size: var(--h0)}

    h1>span>span{
        font-size: var(--h1);
        top: -.68em}
    
    header h2{
        font-size: var(--h2);
        margin-top: -2lh
    }
}
           
blockquote{
    font-style: italic;
    border: none;
    color: #555;
    text-wrap:balance;
    margin-inline:auto;
    text-align: center;
    padding: 1em;
    border-block: 2px solid #aea444;
    background: linear-gradient(to right,rgba(255,255,255,0)0%,rgba(255,255,255,.8)38%,rgba(255,255,255,.8)62%,rgba(255,255,255,0)100%
    );
}

blockquote img{
    margin-inline: auto;
    margin-block:1em -1em;
    width: 2.618em;
}

blockquote+p{margin-top: 0;}
        
@supports not (hanging-punctuation: first force-end last){
    blockquote p{text-indent: -.7ch}
}
            
blockquote p em{color: #000}

.donationItem{
    z-index: 99;
    margin:2.618em auto 0!important}

.donationItem .diSlimTitleWrap{
    top: -1.618em;
    z-index: 1
}

:where(main>:last-child){padding-bottom:4.236em}