*{-webkit-box-sizing:inherit;box-sizing:inherit}*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10px}body{font-family:Arial, Helvetica, sans-serif;font-size:1.6rem;background:#ece9e9;color:#fff;margin:0}main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100vh;padding:3rem}h2{font-size:2.4rem;margin:0}p{margin:0}img{display:block;max-width:100%;height:auto;-o-object-fit:cover;object-fit:cover}.cards-wrapper{display:grid;grid-template-columns:repeat(auto-fill, minmax(50rem, 1fr));gap:1rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:default;width:100%}.card{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;border-radius:10px;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);box-shadow:0 0 10px rgba(0,0,0,0.3)}.card:hover .overlay{min-height:100%;background:rgba(0,0,0,0.7)}.card:hover .overlay-content{display:-webkit-box;display:-ms-flexbox;display:flex}.card img{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.card:hover>img{-webkit-transform:scale(1.2);transform:scale(1.2)}.overlay{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);padding:2rem;-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;min-height:0}.overlay-content{-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;position:absolute;bottom:0;padding:2rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-animation:scrollUp 500ms ease-in-out;animation:scrollUp 500ms ease-in-out;display:none}@-webkit-keyframes scrollUp{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes scrollUp{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@media (max-width: 500px){body{font-size:1.2rem}main{padding:1rem}h2{font-size:1.6rem}.cards-wrapper{grid-template-columns:1fr}.card img{height:30vh}}