/***************************************************************************
* Wrapper
****************************************************************************/
.three_gallery {
    width: 100%; position: relative;
    padding: 0 0 89%;
}

.three_gallery.anim_item {
    transition: none;
    opacity: 1;
    transform: translate(0,0);
}

/***************************************************************************
* Items
****************************************************************************/
.three_gallery .three_gallery_item {
    position: absolute; top: 0; left: 0; 
    width: 32%; height: 84%; /*background-color: var(--typo-color-black);*/
    background-color: transparent;
    border-radius: 0.25rem; transition: all 1s ease;
    overflow: hidden;
}
.three_gallery .three_gallery_item img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
}

.three_gallery .three_gallery_item.one {top: 0; left: 0;}
.three_gallery .three_gallery_item.two {top: 16%; left: 34%;}
.three_gallery .three_gallery_item.three {top: 7%; left: 68%;}

.three_gallery.anim_item .three_gallery_item.one {top: 16%; }
.three_gallery.anim_item .three_gallery_item.two {top: 0%;}
.three_gallery.anim_item .three_gallery_item.three {top: 10%;}

.three_gallery.anim_item.start_anim .three_gallery_item.one {top: 0; }
.three_gallery.anim_item.start_anim .three_gallery_item.two {top: 16%;}
.three_gallery.anim_item.start_anim .three_gallery_item.three {top: 7%;}

.wrapper .three_gallery.anim_item:hover .three_gallery_item.one {top: 16%; }
.wrapper .three_gallery.anim_item:hover .three_gallery_item.two {top: 0%;}
.wrapper .three_gallery.anim_item:hover .three_gallery_item.three {top: 10%;}


/***************************************************************************
* SVG
****************************************************************************/
.three_gallery > svg {
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 100%;
}
.three_gallery.three_gallery.anim_item > svg .one,
.three_gallery.three_gallery.anim_item > svg .two,
.three_gallery.three_gallery.anim_item > svg .three {
    transition: all 1s ease;
}
.three_gallery.three_gallery.anim_item > svg .one { transform: translate(0,15%);}
.three_gallery.three_gallery.anim_item > svg .two { transform: translate(0,-15%);}
.three_gallery.three_gallery.anim_item > svg .three { transform: translate(0,6%);}

.three_gallery.three_gallery.anim_item.start_anim > svg .one,
.three_gallery.three_gallery.anim_item.start_anim > svg .two,
.three_gallery.three_gallery.anim_item.start_anim > svg .three {
    transform: translate(0,0);
}
.three_gallery.three_gallery.anim_item:hover > svg .one { transform: translate(0,15%);}
.three_gallery.three_gallery.anim_item:hover > svg .two { transform: translate(0,-15%);}
.three_gallery.three_gallery.anim_item:hover > svg .three { transform: translate(0,3%);}