.card{
  min-width: calc(100% + 1px);
  min-height: 100%;
  position: relative;
}
.card__front,
.card__back{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card__front-content ul,
.card__back-content ul{
  padding-left: 0;
}

{# Animation for Fade #}
.card--overflow {
  overflow: hidden;
}
.card__front--fade,
.card__back--fade{
  width: 100%;
  height: 100%;
}
.card__front--fade{
  opacity: 1;
}
.card__back--fade{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.card__back--fade-top{
  transform: translateY(-100%);
}
.card:hover .card__front--fade-top{
  opacity: 0;
  transform: translateY(100%);
}
.card:hover .card__back--fade-top{
  opacity: 1;
  transform: translateY(0);
}
.card__back--fade-bottom{
  transform: translateY(100%);
}
.card:hover .card__front--fade-bottom{
  opacity: 0;
  transform: translateY(-100%);
}
.card:hover .card__back--fade-bottom{
  opacity: 1;
  transform: translateY(0);
}
.card__back--fade-left{
  transform: translateX(100%);
}
.card:hover .card__front--fade-left{
  opacity: 0;
  transform: translateX(-100%);
}
.card:hover .card__back--fade-left{
  opacity: 1;
  transform: translateX(0);
}
.card__back--fade-right{
  transform: translateX(-100%);
}
.card:hover .card__front--fade-right{
  opacity: 0;
  transform: translateX(100%);
}
.card:hover .card__back--fade-right{
  opacity: 1;
  transform: translateX(0);
}
{# End Animation for Fade #}

{# Animation for Flip #}
.card__front--flip,
.card__back--flip{
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card__back--flip{
  position: absolute;
  top: 0;
  left: 0;
}
.card__front--flip-top,
.card__front--flip-bottom{
  transform: perspective(2000px) rotateX(0deg);
}
.card__back--flip-top,
.card__back--flip-bottom{
  transform: perspective(2000px) rotateX(180deg);
}
.card:hover .card__front--flip-top{
  transform: perspective(2000px) rotateX(180deg);
}
.card:hover .card__back--flip-top{
  transform: perspective(2000px) rotateX(360deg);
}
.card:hover .card__front--flip-bottom{
  transform: perspective(2000px) rotateX(-180deg);
}
.card:hover .card__back--flip-bottom{
  transform: perspective(2000px) rotateX(0deg);
}
.card__front--flip-left,
.card__front--flip-right{
  transform: perspective(2000px) rotateY(0deg);
}
.card__back--flip-left,
.card__back--flip-right{
  transform: perspective(2000px) rotateY(-180deg);
}
.card:hover .card__front--flip-left{
  transform: perspective(2000px) rotateY(-180deg);
}
.card:hover .card__back--flip-left{
  transform: perspective(2000px) rotateY(-360deg);
}
.card:hover .card__front--flip-right{
  transform: perspective(2000px) rotateY(180deg);
}
.card:hover .card__back--flip-right{
  transform: perspective(2000px) rotateY(0deg);
}
{# End Animation for Flip #}

{# Animation for Zoom #}
.card__front--zoom,
.card__back--zoom{
  width: 100%;
  height: 100%;

}
.card__front--zoom{
  opacity: 1;
}
.card__back--zoom{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.card__front--zoom-in{
  transform: scale(1);
}
.card__back--zoom-in{
  transform: scale(0.5);
}
.card:hover .card__front--zoom-in{
  opacity: 0;
  transform: scale(1.1);
}
.card:hover .card__back--zoom-in{
  opacity: 1;
  transform: scale(1);
}
.card__front--zoom-out{
  transform: scale(1);
}
.card__back--zoom-out{
  transform: scale(1.1);
}
.card:hover .card__front--zoom-out{
  opacity: 0;
  transform: scale(0.5);
}
.card:hover .card__back--zoom-out{
  opacity: 1;
  transform: scale(1);
}
{# End Animation for Zoom #}

.card__front-content,
.card__back-content{
}