.cards{display:flex;flex-direction:row;flex-wrap:wrap;gap:20px}.cards .card{position:relative;border:1px solid #dcebf3;display:flex;flex-direction:column;width:30%;cursor:pointer;box-shadow:1px 3px 3px 3px #a9a9a9}.cards .card img{padding:3px}.cards .card .card-body .card-footer,.cards .card .card-body .card-content p{padding:10px}.cards .card .card-body .card-content p{font-size:16px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;height:5em;-webkit-line-clamp:3;margin-bottom:10px}.cards .card .card-footer{display:flex;flex-direction:row;align-item:center;justify-content:space-between;border-top:1px solid #dcebf3}.cards .card .card-footer p{margin:5px 0;font-size:14px;font-weight:600}.cards .card .overlay{position:absolute;top:0;left:0;background:teal;color:#fff;width:100%;transition:opacity 0.5s ease,transform 0.5s ease;opacity:0;font-size:14px;line-height:150%;padding:20px 20px 80px 20px;transform:translateY(100%);overflow:hidden;text-overflow:ellipsis;display:flex;align-items:flex-start;flex-wrap:wrap;height:auto;max-height:100%}.cards .card:hover .overlay{opacity:1;transform:translateY(0)}