.card{perspective:1000px;background-color:#0000;border:none;width:100%;height:400px;margin:0;padding:0}@media screen and (min-width:40em) and (max-width:55em){.card{width:50%}}@media screen and (min-width:55em) and (max-width:70em){.card{width:33.33%}}@media screen and (min-width:70em) and (max-width:120em){.card{width:25%}}@media screen and (min-width:120em){.card{width:15%}}.flip-card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s;position:relative}.card.active .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;width:100%;height:100%;position:absolute;top:0;left:0}.flip-card-front{z-index:2}.flip-card-back{z-index:3;color:#000;background-color:#fff;transform:rotateY(180deg)}