.contain{grid-template-columns:repeat(3,1fr);gap:24px;width:100%;display:grid}.box{background-color:#000;width:100%;height:400px;position:relative;overflow:hidden;box-shadow:0 20px 40px #00000026}.box .imgBx{width:100%;height:100%;position:absolute;top:0;left:0}.box .imgBx img{object-fit:cover;object-position:top;width:100%;height:100%;transition:all .5s;position:absolute;top:0;left:0}.box:hover .imgBx img{opacity:0;cursor:pointer}.box .content{box-sizing:border-box;background:#fff;width:80%;height:60px;padding:15px;transition:all .5s;position:absolute;bottom:20px;left:10%;overflow-y:auto}.box:hover .content{width:100%;height:100%;bottom:0;left:0}.box .content h3{margin:0;padding:0;font-size:16px}.box .content span{opacity:0;margin:10px 0 0;padding:0;line-height:1.4em;transition:all .5s}.box:hover .content span{opacity:1;transition-delay:.5s}@media screen and (max-width:768px){.contain{grid-template-columns:repeat(2,1fr);gap:16px}.box{height:350px}}@media screen and (max-width:600px){.contain{grid-template-columns:1fr;gap:16px;max-width:400px;margin:0 auto}.box{height:400px}}