body{margin:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}main{text-align:center;margin-top:40px}header{margin:0;height:56px;padding:0 16px 0 24px;background-color:#35495e;color:#fff}header span{display:block;position:relative;font-size:20px;line-height:1;letter-spacing:.02em;font-weight:400;box-sizing:border-box;padding-top:16px}.cards{-webkit-column-count:1;column-count:1;-webkit-column-gap:1em;column-gap:1em}.wrapper{padding:15px}@media only screen and (min-width:500px){.cards{-webkit-column-count:2;column-count:2}}@media only screen and (min-width:700px){.cards{-webkit-column-count:3;column-count:3}}@media only screen and (min-width:900px){.cards{-webkit-column-count:4;column-count:4}}@media only screen and (min-width:1100px){.cards{-webkit-column-count:5;column-count:5}}.card{background:#f5f5f5;padding:10px;display:inline-block;margin:0 0 1em;width:100%;cursor:pointer;-webkit-perspective:1000;-webkit-backface-visibility:hidden;transition:all .1s ease-in-out}.card:hover{-webkit-transform:translateY(-.5em);transform:translateY(-.5em);background:#ebebeb}img{display:block;width:100%}