.ngparafigure {
    display: flex;
    margin: 0;
    padding: 0;
    gap: var(--gap,30px);
}

.ngparafigure .ngparafigure-picture {
    display: block;
    margin: 0;
    padding: 0;
}

.ngparafigure .ngparafigure-picture picture {
    display: block;
    margin: 0;
    padding: 0;
}

.ngparafigure .ngparafigure-picture picture img {
    display: block;
    height: auto;
    width: 100%;
    border-radius: var(--corners,0);
    box-shadow: var(--shadow,none);
}

.ngparafigure .ngparafigure-legend {
    display: block;
    margin: 0;
    padding: 0;
}

.ngparafigure .ngparafigure-legend *:first-child {
    margin-top: 0;
}

.ngparafigure .ngparafigure-legend *:last-child {
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .ngparafigure-topright .ngparafigure-picture,
    .ngparafigure-topleft .ngparafigure-picture,
    .ngparafigure-bottomright .ngparafigure-picture,
    .ngparafigure-bottomleft .ngparafigure-picture
    {
        width: calc(var(--ratio,50%) - var(--gap,30px) /2);
    }

    .ngparafigure-topright .ngparafigure-legend,
    .ngparafigure-topleft .ngparafigure-legend,
    .ngparafigure-bottomright .ngparafigure-legend,
    .ngparafigure-bottomleft .ngparafigure-legend
    {
        width: calc((100% - var(--ratio,50%)) - var(--gap,30px) /2);
    }

    .ngparafigure-bottomleft .ngparafigure-legend,
    .ngparafigure-bottomright .ngparafigure-legend {
        align-self: flex-end;
    }

    .ngparafigure-top,
    .ngparafigure-bottom {
        flex-direction: column;
    }

    .ngparafigure-topleft .ngparafigure-picture,
    .ngparafigure-bottomleft .ngparafigure-picture {
        order: 1;
    }

    .ngparafigure-topleft .ngparafigure-legend,
    .ngparafigure-bottomleft .ngparafigure-legend {
        order: 0;
    }
}

.ngparafigure-top .ngparafigure-picture {
    order: 1;
}

.ngparafigure-top .ngparafigure-legend {
    order: 0;
}

@media (max-width: 1023px) {
    .ngparafigure
    {
        flex-direction: column;
    }
}

.ngparafigure-animate .ngparafigure-legend {
    opacity: 0.25;
    transition: opacity 3s, transform 2s;
}

.ngparafigure-animate.ngparafigure-topleft .ngparafigure-legend,
.ngparafigure-animate.ngparafigure-topright .ngparafigure-legend {
    transform: translate3d(0,15px,0);
}

.ngparafigure-animate.ngparafigure-bottomleft .ngparafigure-legend,
.ngparafigure-animate.ngparafigure-bottomright .ngparafigure-legend {
    transform: translate3d(0,-15px,0);
}

.ngparafigure-animate .ngparafigure-legend.ngparafigure-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}