.wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}h1{color:#fff;font-family:Plus Jakarta Sans,sans-serif;font-size:2.5rem;font-weight:400;margin:1rem 0;text-align:center}.wrapper{margin:0 auto;max-width:80rem;width:90%}.cols{-webkit-box-pack:center;-ms-flex-pack:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center}.col{cursor:pointer;margin:1.5rem;width:calc(25% - 2rem)}.container{-webkit-perspective:1000px;perspective:1000px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.back,.front{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-position:50%;background-size:cover;border-radius:10px;box-shadow:0 4px 8px 0 rgba(0,0,0,.25);color:#000;font-size:1.05rem;height:auto;min-height:300px;text-align:center;-webkit-transition:-webkit-transform .7s cubic-bezier(.4,.2,.2,1);transition:-webkit-transform .7s cubic-bezier(.4,.2,.2,1);-o-transition:transform .7s cubic-bezier(.4,.2,.2,1);transition:transform .7s cubic-bezier(.4,.2,.2,1);transition:transform .7s cubic-bezier(.4,.2,.2,1),-webkit-transform .7s cubic-bezier(.4,.2,.2,1)}.back{background:#ccc;background:-webkit-linear-gradient(45deg,#e5e5e5,#fff);background:-o-linear-gradient(45deg,#cedce7 0,#596a72 100%);background:linear-gradient(45deg,#e5e5e5,#fff)}.front:after{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.container:hover .back,.container:hover .front{-webkit-transition:-webkit-transform .7s cubic-bezier(.4,.2,.2,1);transition:-webkit-transform .7s cubic-bezier(.4,.2,.2,1);-o-transition:transform .7s cubic-bezier(.4,.2,.2,1);transition:transform .7s cubic-bezier(.4,.2,.2,1);transition:transform .7s cubic-bezier(.4,.2,.2,1),-webkit-transform .7s cubic-bezier(.4,.2,.2,1)}.back{top:0}.back,.inner{left:0;position:absolute;width:100%}.inner{-webkit-box-sizing:border-box;box-sizing:border-box;outline:1px solid transparent;padding:2rem;-webkit-perspective:inherit;perspective:inherit;top:50%;-webkit-transform:translateY(-50%) translateZ(60px) scale(.94);transform:translateY(-50%) translateZ(60px) scale(.94);z-index:2}.container .back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.container .front,.container:hover .back{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.container:hover .front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.front .inner p{font-size:2rem;margin-bottom:2rem;position:relative}.front .inner p:after{bottom:-.75rem;content:"";display:block;height:2px;left:0;margin:0 auto;position:absolute;right:0;width:4rem}.front .inner span{font-family:Plus Jakarta Sans,sans-serif;font-weight:300}@media screen and (max-width:94rem){.col{width:calc(33.33333% - 3rem)}.front{background-repeat:no-repeat;background-size:contain}.back{font-size:1rem}}@media screen and (max-width:64rem){.col{width:calc(80% - 11rem)}.front{background-repeat:no-repeat;background-size:contain}.back{font-size:1rem}}@media screen and (max-width:32rem){.col{width:calc(95% - 1rem)}.front{background-size:cover}}