.header-scale{
    width: var(--width);
    height: auto;
    margin-inline:auto;
    flex-direction: column;
}

.header-scale hgroup{
    position: unset;
    inset: unset;
    color: #333;
    transform: unset;
    padding-block: 2.618em 1.618em;
    animation: none
}

.bg-img-scale{height: 100%}

.bg-img-wrapper{
    position: unset;
    inset: unset;
    height: calc(var(--width)*.5625);
}

.bg-img{
    position: unset;
    inset: unset;
}

#timeline header{
    width: var(--width);
    margin-inline: auto
}

.slideshow .scroll-x.scroll-snap {
    align-items: center;
    padding-inline:var(--margin-inline);
}

.scroll-x.scroll-snap>* {flex: 0 0 var(--width)}

.timeline.card{
    font-family: 'roboto flex',roboto;
    background-color: rgba(255,255,255,0);
    flex: 0 0 80vmin!important
}

:is(.sda,.sda-pf) .timeline.card{
    animation: card both linear;
    animation-timeline: view(inline);
    animation-range: cover 0% cover 100%;
    opacity: .55;
    filter: blur(5px)saturate(.34);
    scale: .89;
}

@keyframes card{
    50%{
        opacity: 1;
        filter: blur(0)saturate(1);
        scale: 1
    }
}

.timeline.card figure{
    border-radius: 0;
    position: relative;
}

.timeline.card article{
    padding:1em 0;
    flex: 1 1 62%;
}

.timeline.card i{
    font-family: merriweather,georgia,serif;
    font-size: var(--small);
    line-height: 1;
    font-style: italic;
    font-stretch: 89%;
    color: #f44;
    margin-bottom: .34lh;
}

.timeline.card h3{
    margin-bottom: .236em;
    line-height: 1.1!important;
    font-weight: 610!important;
    text-wrap:pretty;
    font-stretch: 34%!important;
    color: #fff
}

.timeline.card :is(p,ul){
    font-family: roboto;
    font-size: var(--small);
    line-height: 1.382;
    color: #eee
}

.timeline.card:not(:has(figure)) p{font-size: 1em}

@media(min-width:calc(62ch + 2em)){
    .timeline.card p{
        font-size: 1em;
        line-height: 1.618;
    }
} 

@media(min-aspect-ratio:1/1){
    
    .timeline.card{
        flex-direction: row;
        flex-wrap: wrap;
        gap:1em;
        flex: 0 0 80vw!important
    }
    
    .timeline.card :is(figure,img){
        animation: none;
        object-position: center
    }
                
    .timeline.card figure{flex: 1 1 calc(var(--width)*.34)}
    .timeline.card img{aspect-ratio: 1}
    .timeline.card article{
        padding:0;
        flex: 1 1 38%
    }
    
    .timeline.card:not(:has(figure)) article{
        flex:0 0 100%;
        margin-inline:auto;
        background-color: #222;
        padding: 1em
    }
    
    #tl-7 img{object-position: 70%}
    #tl-10 img{object-position: 45%}
    #tl-18 img{object-position: 85%}
    @media(min-width:calc(62ch + 2em)){
        .timeline.card article{flex: 1 1 calc(var(--width)*.55)}
        .timeline.card:not(:has(figure)) article{flex:0 0 calc(62% + 2em)}
    }
    
    @media(min-width:64em){
        .timeline.card{flex: 0 0 100vmin!important}
    }
} 

.bg-img *{height: 100%}
iframe{
    height: 100%;
    object-fit: cover;
}