p:not(hgroup p){font-family: georgia,serif}
section{padding-bottom: 4.236em}
section>figure{height: 100vmin}

section>figure img{
    width: 100%!important;
    height: 100%}

section:first-of-type header{margin-bottom: 2.618em}

section:nth-of-type(1)>div>p:first-of-type:first-letter{
    
    font-family: roboto,system-ui;
    font-size: calc((var(--base-unit)*1.618)*3.65);
    line-height: .8;
    font-weight: 800;
    float: left;
}

section:nth-of-type(1)>div>p:first-of-type:first-letter{color: #e3a423;}

section:nth-of-type(2) h2{color: #be4c1a}

section:nth-of-type(3) h2{color: #ffb826}

section:last-of-type p:nth-last-of-type(2){
    border: 1px solid #00a651;
    border-radius: 1ch;
    padding: 1em;
    font-family: roboto,system-ui;
    color: #555
}

@media(min-aspect-ratio:1/1) and (min-width:64rem){
    section,main>:last-child{
        display: flex;
        width: 100%;
        padding-bottom: 0}
    
    section:nth-of-type(even){flex-direction: row-reverse}
    
    section>*{
        margin: 0;
        flex-basis: 50%}
    
    section>figure{
        position: sticky;
        top: 0;
        width: 50%}
    
/*    section:first-of-type>figure{margin-top: calc(var(--nav-3)*-1)}*/
    
    section>div{
        padding: 4.236em min(3vw,2.618em);
        padding: 5lh min(3vw,2.618em) 4.236em}
    
    section>div>*{
        width: min(100%, var(--ch-unit,.56125em)*62);
        margin-inline: auto}
}