.spin-animation{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background-color:#eeeeea}.wrapper{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.container{height:400px;display:flex;flex-wrap:nowrap;justify-content:start}.card{width:80px;border-radius:.75rem;background-size:cover;background-position:center;cursor:pointer;overflow:hidden;border-radius:2rem;margin:0 10px;display:flex;align-items:flex-end;transition:.6s cubic-bezier(.28,-.03,0,.99);box-shadow:0 10px 30px -5px #000c;border:2px solid black}.card>.row{color:#fff;display:flex;flex-wrap:nowrap}.card>.row>.icon{background:#223;color:#fff;border-radius:50%;width:50px;display:flex;justify-content:center;align-items:center;margin:15px}.card>.row>.description{display:flex;justify-content:center;flex-direction:column;overflow:hidden;height:80px;width:520px;opacity:0;transform:translateY(30px);transition-delay:.3s;transition:all .3s ease}.description p{color:#fff;padding-top:5px;font-size:.9rem;line-height:1.4;text-shadow:0 2px 4px rgba(0,0,0,.8)}.description h4{text-transform:uppercase;color:#fff;font-size:1.1rem;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.9);line-height:1.3}input{display:none}input:checked+label{width:600px}input:checked+label .description{opacity:1!important;transform:translateY(0)!important}@media screen and (max-width: 1199px){.card>.row>.description{width:400px}input:checked+label{width:480px}}@media screen and (max-width: 767px){.wrapper{height:auto;min-height:100vh;padding:40px 10px}.container{height:auto;flex-direction:column;align-items:center;gap:15px}.card{width:90%;max-width:350px;min-height:80px;margin:0;border-radius:1.5rem}input:checked+label{width:90%;max-width:350px;min-height:250px}.card>.row>.description{width:calc(100% - 60px)}}