.triggered-content>*{
    border-radius: .618em;
    overflow: clip;
    box-shadow:0 0 1ch rgba(0,0,0,.05),0 .146ch .236ch rgba(0,0,0,.05),.146ch .236ch .382ch rgba(0,0,0,.05),.236ch .382ch .618ch rgba(0,0,0,.05)}

section:not(:last-of-type) .triggered-content img{
    aspect-ratio: 1;
}       

.triggered-content,
    .content-trigger{
    margin-top: 1.618em;
} 

.triggered-content,
.content-trigger{
    width: min(100%, var(--ch-unit,.56125em)*62);
}

h2{
    text-wrap:balance
}

p{
    text-wrap:pretty;
}
         
@media (min-width: calc(100ch + 2em)){
    div:has(.content-trigger){
        position: relative;
    }
    
    section:has(.triggered-content,.content-trigger){
        --triggered-content:min(50%,((100ch - 2.618em)/2));
    }       
    
    .triggered-content,
    .content-trigger{
        width: var(--triggered-content);
    }
                
    .content-trigger{
        margin-top: 0;
        padding-top: 2.618em;
    }
    
    .triggered-content{
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        height: 100%}

    .triggered-content :is(div,img){
        margin-top: 4.236em;
        position: sticky!important;
        top: calc((100vh - ((100ch - 2.618em)/2))/2);
        transition: opacity .5s linear;
        opacity: 0}
    
    .triggered-content div{
        top: calc((100vh - (var(--triggered-content) * .5625) - 4.236em)/2);
    }
    
    .triggered-content:has(+.content-trigger.visible) :is(div,img){
        opacity: 1;
    }
}