.solution-links-cell {
    position: absolute;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    width: 100%;
    height: 100%;
}

.flipper {
    position: relative;
    aspect-ratio: 5/4;
    
    transform-style: preserve-3d;
    box-shadow: 0px 4px 10px 4px #ccc;
    border-radius: 3px;
}
.flipper.flippable{
    transition: transform 0.75s ease-in-out;
}
.flipper-holder{
    flex: 1;
    
}

.flipper-holder:hover .flipper.flippable {
    transform: rotateY(180deg);
}

.back-face {
    aspect-ratio: 5/4;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    color: white;
    background-color: #3155a4;
}

.back-face-info {
    display: block;
    margin: auto auto;
}

.front-face.flipped {
    z-index: -50;
    display: none;
}

.front-face {
    aspect-ratio: 5/4;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.solution-row {
    position: relative;
    display: flex;
    width: 100%;
    column-gap: 3rem;
    justify-content: space-between;
    margin-bottom: 4rem;
}

.img-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    mask-image: radial-gradient(rgba(0, 0, 0, 1) -100%, transparent 100%);
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) -100%, transparent 100%);
}

.link-bottom:hover,
.back-link-bottom:hover {
    cursor: pointer;
}

.link-bottom.hovering.offhover div::before {
    animation: 0.35s unrotate;
    background-image: linear-gradient(#3155a4, #3155a4);
}

.back-link-bottom.hovering.offhover div::before {
    animation: 0.35s unrotate;
    background-image: linear-gradient(white, white);
}

.link-bottom.offhover div::before,
.back-link-bottom.offhover div::before {

    background-image: none;
}

.link-bottom.flipped {
    display: none;
}

.link-bottom.extended.hovering div::before{
    width: 30%;
}
.link-bottom.hovering div::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 22%;
    height: 9%;
    background-repeat: no-repeat;
    background-size: 100% 6%, 79% 76%;
    background-position-y: 80%;
    background-image: linear-gradient(#3155a4, #3155a4);
    animation: rotate 0.35s;
}

.back-link-bottom.hovering div::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 30%;
    height: 9%;
    background-repeat: no-repeat;
    background-size: 100% 6%, 79% 76%;
    background-position-y: 75%;
    background-image: linear-gradient(white, white);
    animation: rotate 0.35s;
}

.back-link-bottom {
    margin: 0 auto 2rem;
    background-color: transparent;

    text-align: center;
    display: flex;
    align-content: center;
    overflow: hidden;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
    color: white !important;
}

.img-top {
    background-color: #3155a4;
    height: 12rem;
    background-position: center;
    background-size: cover;
}

.info-center {
    flex: 1;
    border: 1px solid #eeeeee;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-rest {
    position: absolute;
    border-bottom: 1px solid #ddd;
    width: 3rem;
    transform: translateY(-1rem);
    left: 2rem;
}

.info-center h2, .back-face-info h2 {
    font-weight: 600;
    text-align: center;
    font-size: 22px;
    
}
.back-face-body{
    padding: 1rem 2rem;
}

.link-bottom div {
    padding: 0 0 2rem;
    background-color: transparent;
    color: #3155a4;
    text-align: center;
    display: flex;
    font-weight: 500;
    align-content: center;
    overflow: hidden;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
}

/* animations */

@keyframes rotate {
    0% {
        transform: scaleX(0);
        transform-origin: 0 100%;
      
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform-origin: 0 100%;
       
        opacity: 1;
    }
}

@keyframes unrotate {
    0% {
        transform: scaleX(1);
        transform-origin: 100% 100%;
       
        opacity: 1;
    }

    100% {
        transform: scaleX(0);
        transform-origin: 100% 100%;
        opacity: 1;
      
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px){

    .back-link-bottom.hovering div::before, .link-bottom.extended.hovering div::before {
        width: 36%;
        height: 11%;
    }
   
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

   
    .solution-row {
        margin-bottom: 2rem;
    }
    .back-link-bottom.hovering div::before, .link-bottom.extended.hovering div::before {
        width: 46%;
        height: 14%;
    }
}



/* mobile*/
@media only screen and (max-width: 767px) {
    .back-link-bottom.hovering div::before, .link-bottom.extended.hovering div::before {
        width: 27%;
        height: 9%;
    }
   
    .flipper-holder{
        width: 65%;
        margin: auto;
    }
    .flipper{
        margin:0 auto 4rem;
        
    }
    .solution-row {
        position: relative;
        display: block;
       
        width: 100% !important;
    }
}