.sandwich_animation {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;/* */
    aspect-ratio: 4 / 3; /* Adjust to match your desired layout */

    --full:100%;
    --twothirds: 66%;
    --half: 50%;
}

.pageheader figure.sandwich_animation {
    margin:0 auto;
}


@media all and (min-width:900px) {
    .sandwich_animation {

    }
    .pageheader figure.sandwich_animation {
        margin:  0;
    }

}
@media all and (min-width:1500px) {
    .sandwich_animation {

    }
}
.sandwich_animation .sa_layer {
    position: absolute;

}

.sandwich_animation svg.sa_layer { height: 100%; max-height:60vw; width: auto; left: 48%; top:50%; transform:translate(-50%,-50%); }

@media all and (min-width:900px) {

    .sandwich_animation svg.sa_layer {   max-height:450px;   }

}
.sandwich_animation div.sa_layer{
    position: absolute; overflow: hidden;  }

.sandwich_animation div.sa_layer:first-child { top: 0; left:0;  }
.sandwich_animation div.sa_layer:last-child { bottom: 0; right:0;  }

.sandwich_animation.endpoint    { }
.sandwich_animation.endpoint div.going_down { top:0 !important; bottom:auto !important }
.sandwich_animation.endpoint div.going_up { bottom: 0 !important; top:auto !important;  }

@media (prefers-reduced-motion: reduce) {


}
/*
div.sa_layer picture.c { position:absolute;   display:block; width: 100%; height: 100%; top:50%; left: 50%; transform: translate(-50%,-50%);   }
div.sa_layer picture.c img {     transform: translate(-50%, -50%) !important; }
*/

div.sa_layer.strip {position:absolute; width:35%;  height: 100%;

}


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
div.sa_layer.strip:first-child {opacity:0;animation: fadeIn 4s ease-out forwards;}
div.sa_layer.strip:last-child {opacity:0;animation: fadeIn 2s ease-out forwards;}

div.sa_layer.strip>div { width: 100%; height: auto;
    position: absolute;}
div.sa_layer.strip:last-child {  width: 46%; }
div.sa_layer.strip:first-child, div.sa_layer.strip:first-child>div { left:0; bottom:0;   }
div.sa_layer.strip:last-child, div.sa_layer.strip:last-child>div { right:0; top:0; }



div.sa_layer.strip>div {  display:flex; flex-direction: column; gap:var(--gutter_big); will-change: transform; }

div.sa_layer.strip picture {
    display: block;
}

div.sa_layer.strip picture.full {
    width: var(--full)
}

div.sa_layer.strip picture.twothirds {
    width: var(--twothirds);
}

div.sa_layer.strip picture.half {
    width: var(--half);
}

div.sa_layer.strip picture img {
    display: block;
    width: 100%;
    height: auto;
}

/*div.sa_layer.strip:first-child>div {

    animation: scrollUp 5s ease-out 0s 1 forwards;
}
div.sa_layer.strip:last-child>div {

    animation: scrollDown 5s ease-out 0s 1 forwards;
}*/



@keyframes sa_scrollUp {
    0% { bottom: 0;top:auto; }
    100% { bottom:auto; top: 0; } /* adjust this */
}
@keyframes scrollUp {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(-100%);
    }
}
@keyframes scrollDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); } /* adjust this */
}