.menukaart {
    overflow: hidden;
}

.menukaart [class*="container"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 calc(var(--site-padding) * 2);
}

.menukaart figure {
    flex-grow: 1;
    flex-basis: 280px;
    position: relative;
    max-width: min(32rem, 75vw);
    padding-bottom: 15%;
}

.menukaart figure div {
    position: relative;
    --col-offset: 20%;
}

.menukaart figure img {
    width: 100%;
    position: absolute;
    transform-origin: bottom;
}

.inview.lazyloaded-child.menukaart figure img {
    --col-scale2: 1;
    animation: collageMenukaart 20s cubic-bezier(0, .73, .26, .99) forwards;
}

.menukaart figure .collage-offset {
    transform: translate(var(--col-offset), 0);
}

.menukaart figure .menukaart-1 {
    --col-scale: .85;
    --col-trans: 6%;
    --col-rotate: 15deg;
    position: relative;
    transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));
}

.menukaart figure .menukaart-2 {
    --col-scale: .85;
    --col-trans: 0;
    --col-rotate: 10deg;
    left: calc(var(--col-offset) + -28%);
    bottom: -17%;
    width: 115%;
    transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));
}

.menukaart figure .menukaart-3 {
    --col-scale: .9;
    --col-trans: 7.5%;
    --col-rotate: -20deg;
    left: calc(var(--col-offset) + -30%);
    bottom: 12%;
    width: 95%;
    transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));
}

.menukaart figure .cup-saucer-fire {
    --col-scale: .8;
    --col-trans: 15%;
    --col-rotate: 0;
    width: 70%;
    left: calc(var(--col-offset) + -5%);
    bottom: -4%;
    transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));
}

.menukaart figure .menukaart-4 {
    --col-scale: .75;
    --col-scale2: 1.4;
    --col-trans: 10%;
    --col-rotate: 20deg;
    left: calc(var(--col-offset) + -20%);
    bottom: 10%;
    transform-origin: center;
    transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));

}

.menukaart figure .shadow {
    position: absolute;
    bottom: -6%;
    left: 10%;
    height: 65%;
    width: 40%;
    border-radius: 50%;
    background: rgba(0,0,0,.15);
    filter: blur(1rem);
    transform-origin: 50% 60%;
    rotate: -80deg;
}

.menukaart .text {
    flex-grow: 1;
    flex-basis: 280px;
    max-width: var(--container-sm);
    position: relative;
    margin-top: 1rem;
}

.menukaart .text h3 {
    text-transform: uppercase;
    margin-block: 0 .25em;
}

@keyframes collageMenukaart {
    from {
        transform: scale(var(--col-scale)) translate(0, var(--col-trans)) rotate(var(--col-rotate));
    }
    to {
        transform: scale(var(--col-scale2)) translate(0, 0);
    }
}