.pq{
    margin-top: 0;
    position: relative;
    height: max(62vh,66.66vw);
    overflow: clip;
    -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,1)21vh);
    mask-image: linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,1)21vh);
}

.large{
    width: min(100% - 2em,100ch)!important;
    margin: 2lh auto
}

.large.pq{
    animation: none;
    height: fit-content;
    -webkit-mask-image:none;
    mask-image:none;
    margin-block: 2lh
}

.large.pq+*{margin-top: 1lh}
           
.fullscreen{
    width: 100%;
    height: 100vw;
}

:is(.sda,.sda-pf) .pq,
:is(.sda,.sda-pf) .fullscreen{
    animation: pq-out linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
}

@keyframes pq-out{
    70%{opacity: 1}
    90%{opacity: 0}
    100%{
        opacity: 0;
        transform: translateY(13vh);
    }
}

.fullscreen img{
    height: 100%;
    aspect-ratio: unset
}

.pq+*{position: relative}

.pq img{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pq .bg{
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)30%);
    mask-image: linear-gradient(to bottom,rgba(0,0,0,0)0%,rgba(0,0,0,1)30%);
}
:is(.sda,.sda-pf) .pq .bg{
    animation: pq-bg linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
}

@keyframes pq-bg{to{transform: translateY(5vh)}}

.pq :is(blockquote,hgroup){
    width: min(100% - 2em,62ch);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    -webkit-mask-image: none;
    mask-image: none 
}
:is(.sda,.sda-pf) .pq :is(blockquote,hgroup){
    animation: pq-blockquote linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
    -webkit-mask-image: none;
    mask-image: none
}

@keyframes pq-blockquote{to{transform: translateY(8vh)}}

.pq .fg{z-index: 3}
:is(.sda,.sda-pf) .pq .fg{
    transform: translateY(3vh);
    animation:pq-fg linear both;
    animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
}

@keyframes pq-fg{to{transform: translateY(0)}}

@media(min-aspect-ratio:1/1) and (min-width:calc(100ch + 2em)){
    .pq{
        display: flex;
        align-items: center;
        -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,1)34vh);
        mask-image: linear-gradient(to top,rgba(0,0,0,0)0%,rgba(0,0,0,1)34vh)
    }
    :is(.sda,.sda-pf) .pq .fg{transform: translateY(8vh)}
    @keyframes pq-out{
        70%{opacity: 1}
        85%{opacity: 0}
        100%{
            opacity: 0;
            transform: translateY(21vh);
        }
    }
    
    .pq+*{margin-top: -1lh}
    @keyframes pq-blockquote{to{transform: translateY(13vh)}}
}  

.no-sda .pq{
    opacity: 0;
    transition: all 1s linear
}

.no-sda .pq.visible{opacity: 1}