.card{cursor:pointer;width:370px}.card__content{text-align:center;transform-style:preserve-3d;padding:13em 5em;transition:transform 1s;position:relative}@media (min-width:1024px){.card:hover .card__content{transform:rotateY(.5turn)}.card{cursor:default}}.card__content.flipped{transform:rotateY(.5turn)}.card__front,.card__back{backface-visibility:hidden;transform-style:preserve-3d;align-content:center;padding:5em 3em;display:grid;position:absolute;inset:0}.card__front{background-blend-mode:overlay;color:#fff;background-color:#b7c9e5;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/fair.jpg);background-size:cover}.card__title{text-transform:uppercase;color:#fff;font-family:Audiowide,sans-serif;font-size:2rem;transform:translateZ(9rem)}.card__subtitle{letter-spacing:1px;color:#fff;margin-top:.5rem;font-family:Roboto,sans-serif;font-size:1rem;font-weight:400;transform:translateZ(6rem)}.card__body{color:#fff;text-align:left;font-family:Roboto,sans-serif;font-size:1.2rem;font-weight:400;line-height:1.6;transform:translateZ(6rem)}.card__back{color:#fff;background:#000;transform:rotateY(.5turn)}@media (max-width:768px){.card{width:100%;max-width:340px}.card__content{padding:10em 3em}.card__front,.card__back{padding:3em 2em}.card__title{padding:0 1rem;font-size:1.5rem}.card__subtitle{padding:0 1rem;font-size:.875rem}.card__body{font-size:.875rem;line-height:1.5}}@media (max-width:480px){.card{max-width:320px}.card__content{padding:8em 2em}.card__title{padding:0 .75rem;font-size:1.25rem}.card__subtitle{padding:0 .75rem;font-size:.75rem}.card__body{font-size:.75rem}}