*{scrollbar-width:none}::selection{background-color:purple}h1{color:#444;text-align:center;margin:2rem 0;font-family:Montserrat;font-size:2.5rem;font-weight:400}.wrapper{width:90%;max-width:80rem;margin:0 auto}.cols{flex-wrap:wrap;justify-content:center;display:flex}.col{cursor:pointer;width:calc(25% - 2rem);margin:1rem}.container{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;perspective:1000px}.front,.back{-o-transition:transform .7s cubic-bezier(.4,.2,.2,1);backface-visibility:hidden;text-align:center;color:#fff;background-position:50%;background-size:cover;border-radius:10px;height:auto;min-height:280px;font-size:1.5rem;transition:transform .7s cubic-bezier(.4,.2,.2,1);box-shadow:0 4px 8px #00000040}.back{background:linear-gradient(45deg,#cedce7 0%,#596a72 100%)}.front:after{z-index:1;content:"";opacity:.6;backface-visibility:hidden;background-color:#000;border-radius:10px;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.container:hover .front,.container:hover .back{-o-transition:transform .7s cubic-bezier(.4,.2,.2,1);transition:transform .7s cubic-bezier(.4,.2,.2,1)}.back{width:100%;position:absolute;top:0;left:0}.inner{box-sizing:border-box;width:100%;-webkit-perspective:inherit;perspective:inherit;z-index:2;outline:1px solid #0000;padding:2rem;position:absolute;top:50%;left:0;transform:translateY(-50%)translateZ(60px)scale(.94)}.container .back{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform:rotateY(180deg)}.container .front,.container:hover .back{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform:rotateY(0)}.container:hover .front{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform:rotateY(-180deg)}.front .inner p{margin-bottom:2rem;font-size:2rem;position:relative}.front .inner p:after{content:"";background:#c6d4df;width:4rem;height:2px;margin:0 auto;display:block;position:absolute;bottom:-.75rem;left:0;right:0}.front .inner span{color:#ffffffb3;font-family:Montserrat;font-weight:300}@media screen and (max-width:64rem){.col{width:calc(33.3333% - 2rem)}}@media screen and (max-width:48rem){.col{width:calc(50% - 2rem)}}@media screen and (max-width:32rem){.col{width:100%;margin:0 0 2rem}}