.card{background-color:#373434;border-radius:8px;padding:0;box-shadow:0 4px 6px rgba(0,0,0,.1);opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out;width:100%;max-width:700px;min-height:200px;display:flex;flex-direction:column;cursor:pointer}.card:hover{background-color:hsla(0,0%,47%,.9)}.card.in-view{opacity:1;transform:translateY(0)}.card.out-of-view{opacity:0;transform:translateY(0)}.card-title{color:#fff;padding:10px;text-align:center}.card-content{display:flex;align-items:stretch;flex-grow:1}.card-content.reverse{flex-direction:row-reverse}.card-image{width:30%;height:100%;border-radius:8px 0 0 8px;object-fit:cover}.text-content{text-align:left;flex-grow:1;padding:20px}.text-points{font-size:10px}.tools{font-style:italic;font-size:.8rem;font-family:Arial,sans-serif;color:#aaa}.text-title{margin:5px}.link{color:#fff;text-decoration:none;font-size:.9rem;margin-top:1rem}.link:hover{color:#a993fe;text-decoration:underline}@media (max-width:768px){.card{max-width:80vw;min-height:40vh;margin:0 auto}.card,.card-content,.card-content.reverse{flex-direction:column}.card-image{width:100%;height:200px;border-radius:8px 8px 0 0}.text-content{padding:15px}}@media (max-width:1024px){.card{width:600px;min-height:auto;flex-direction:column}.card-image{width:100%;height:250px;border-radius:8px 8px 0 0}.text-content{padding:20px}}