.card-element {
   min-height: 100%;
}

.card:active, .card:hover {
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%), 0 2px 2px rgb(0 0 0 / 22%);
}

.card-flip {
    position: relative;
    width: 100%;
    height: 100%;
}

.flip-side-elem {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
    width: 100%;
    height: 100%;
    margin: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
}
  
.flip-side-front {
    transform: rotateY(0deg);
    background-color: #1E264E;
    color: #fff;
    z-index: 2;
    display:block;
    padding-bottom: 1em;
}
  
.flip-side-front div {
    z-index: 4;
}
  
.flip-side-back {
    position: absolute;
    transform: rotateY(180deg);
    color: #1E264E;
    z-index: 1;
}
  
  .card-flip:hover .flip-side-front {
    transition: transform 1s;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
  }

  .card-flip:hover .flip-side-back {
    transition: transform 1s;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
  }