.card{float:left;padding:0 1.7rem;width:100%;max-width:500px}.card .wrapper{background-color:#d8d8d8;min-height:450px;position:relative;overflow:hidden;box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.2)}.card .wrapper:hover .data{transform:translateY(0)}.card .data{position:absolute;bottom:0;width:100%;transform:translateY(150px);transition:transform .3s}.card .data .content{padding:1em;position:relative;z-index:1}.card .text{height:70px;margin:0}.example-1 .date{position:absolute;top:0;left:0;background-color:#4f96f6;color:#fff;padding:.8em}.example-1 .date span{display:block;text-align:center}.example-1 .date .day{font-weight:700;font-size:24px;text-shadow:1px 1px 1px rgba(0,0,0,0.18)}.example-1 .date .month{text-transform:uppercase}.example-1 .date .month,.example-1 .date .year{font-size:12px}.example-1 .content{background-color:#fff;box-shadow:0 5px 30px 10px rgba(0,0,0,0.3)}.example-1 .title a{color:gray}.example-1 .menu-button{position:absolute;z-index:999;top:16px;right:16px;width:25px;text-align:center;cursor:pointer}.example-1 .menu-button span{width:5px;height:5px;background-color:gray;color:gray;position:relative;display:inline-block;border-radius:50%}.example-1 .menu-button span::after,.example-1 .menu-button span::before{content:"";display:block;width:5px;height:5px;background-color:currentColor;position:absolute;border-radius:50%}.example-1 .menu-button span::before{left:-10px}.example-1 .menu-button span::after{right:-10px}.example-1 .menu-content{text-align:center;position:absolute;top:0;left:0;width:100%;z-index:-1;transition:transform .3s;transform:translateY(0)}.example-1 .menu-content li{width:33.333333%;float:left;background-color:#4f96f6;height:60px;position:relative}.example-1 .menu-content a{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px}.example-1 .menu-content span{top:-10px}