.glass-body-left,
.glass-body,
.glass-body-right {
    /*transform-style: preserve-3d;*/
    position: relative;
    height: 380px;
    /*vertical-align: center;*/

    /*display: flex;*/
    /*background-color: slateblue;*/
}

.glass-body-left:hover .glass-body-back {
    animation-name: change-skewL;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    /*transform: skewX(0) translateX(50px);*/
    /*transition-duration: 0.5s;*/
}

.glass-body-right:hover .glass-body-back {
    animation-name: change-skewR;
    animation-duration: 0.5s;
    animation-fill-mode: both;
    /*transform: skewX(0) translateX(50px);*/
    /*transition-duration: 0.5s;*/
}


/*.glass-body-left:hover .glass-body-values:before {*/
/*    visibility: visible;*/
/*    transform: translateY(80px);*/
/*    transition-duration: 0.5s;*/
/**/
/*}*/

/*.glass-body-left:hover .glass-body-values:after {*/
/*    visibility: visible;*/
/*    transform: translateY(-80px);*/
    /*transform: translateY(-30px);*/
    /*transition-duration: 0.5s;*/
/*}*/

@keyframes change-skewL {
    from {
        transform: skewX(20deg) translateX(55px);

    }
    to {
        transform: skewX(0) translateX(55px);

    }
}

@keyframes change-skewLR {
    from {
        transform: skewX(0) translateX(55px);
    }
    to {
        transform: skewX(20deg) translateX(55px);
    }
}

@keyframes change-skewR {
    from {
        transform: skewX(-20deg) translateX(55px);

    }
    to {
        transform: skewX(0) translateX(55px);

    }
}

@keyframes change-skewRR {
    from {
        transform: skewX(0) translateX(55px);
    }
    to {
        transform: skewX(-20deg) translateX(55px);
    }
}


.glass-body-left .glass-body-back::before,
.glass-body .glass-body-back::before,
.glass-body-right .glass-body-back::before {
    content: '';
    border-radius: 1em;


    width: 200px;
    height: 350px;
    /*background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(255,165,0,100%) 100%);*/
    /*transform: skewX(20deg) translateX(50px);*/
    position: absolute;
    border: 2px;
    filter: blur(30px);
    /*box-shadow: 0px 0px 10px inset;*/
    box-shadow: 0px 0px 20px;
    z-index: 1;
}

.glass-body-left .glass-body-back,
.glass-body .glass-body-back,
.glass-body-right .glass-body-back {
    border-radius: 1em;

    width: 200px;
    height: 350px;
    /*background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(255,165,0,100%) 100%);*/

    /*transform: skewX(20deg) translateX(50px);*/
    /*transition-delay: 2s;*/
    /*transition-duration: 0.5s;*/

    /*animation-name: change-skewLR;*/
    /*animation-duration: 0.5s;*/
    /*animation-fill-mode: both;*/

    position: absolute;

    border: 2px;
    /*filter: blur(30px);*/
    /*box-shadow: 0px 0px 10px inset;*/
    box-shadow: 0px 0px 20px;
    z-index: 0;
}

.glass-body-left .glass-body-back {
    animation-name: change-skewLR;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.glass-body .glass-body-back {
    transform: translateX(55px)
    /*animation-name: change-skewLR;*/
    /*animation-duration: 0.5s;*/
    /*animation-fill-mode: both;*/
}

.glass-body-right .glass-body-back {
    animation-name: change-skewRR;
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.glass-body-left .glass-body-back[color="orange"]::before,
.glass-body .glass-body-back[color="orange"]::before,
.glass-body-right .glass-body-back[color="orange"]::before {
    background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(255,165,0,100%) 100%);
}

.glass-body-left .glass-body-back[color="blue"]::before,
.glass-body .glass-body-back[color="blue"]::before,
.glass-body-right .glass-body-back[color="blue"]::before {
    background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(0,0,255,100%) 100%);
}


.glass-body-left .glass-body-back[color="green"]::before,
.glass-body .glass-body-back[color="green"]::before,
.glass-body-right .glass-body-back[color="green"]::before {
    background: linear-gradient(180deg, rgba(0,0,255,100%) 0%, rgba(0,255,0,100%) 100%);
}


.glass-body-left .glass-body-back[color="orange"],
.glass-body .glass-body-back[color="orange"],
.glass-body-right .glass-body-back[color="orange"] {
    background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(255,165,0,100%) 100%);
}

.glass-body-left .glass-body-back[color="blue"],
.glass-body .glass-body-back[color="blue"],
.glass-body-right .glass-body-back[color="blue"] {
    background: linear-gradient(180deg, rgba(255,0,0,100%) 0%, rgba(0,0,255,100%) 100%);
}


.glass-body-left .glass-body-back[color="green"],
.glass-body .glass-body-back[color="green"],
.glass-body-right .glass-body-back[color="green"] {
    background: linear-gradient(180deg, rgba(0,0,255,100%) 0%, rgba(0,255,0,100%) 100%);
}


.glass-body-left .glass-body-values,
.glass-body .glass-body-values,
.glass-body-right .glass-body-values {

    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    /*padding-bottom: 20px;*/
    /*padding-top: 20px;*/
    /*margin: 135px 20px;*/
    /*padding: 135px 20px;*/
    /*padding-left: 50px;*/

    /*margin-bottom: 100px;*/
    margin-top: -10px;
    color: white;
    width: 320px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 1rem;
    position: relative;
    /*padding: 1px;*/
    z-index: 5;

        /*display: block;*/

}



.flex-images {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 30px;
    justify-content: space-around;
    align-items: normal;
    align-content: space-around;
}