.card-container{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px;gap:20px;max-width:1200px;margin:0 auto;padding:20px}.e-card{margin:0 auto;background:transparent;box-shadow:0 8px 28px -9px rgba(0,0,0,.45);position:relative;width:100%;max-width:240px;height:330px;border-radius:16px;overflow:hidden}.wave{position:absolute;width:540px;height:700px;opacity:.6;left:0;top:0;margin-left:-50%;margin-top:-70%;background:linear-gradient(744deg,#056091,navy 60%,#00ddeb)}.icon{width:70px;height:70px;fill:#fff;padding-bottom:1em}.infotop{text-align:center;font-size:20px;padding:5px;position:absolute;top:3em;left:0;right:0;color:#fff;font-weight:600}.name{font-size:14px;font-weight:100;position:relative;top:1em;text-transform:lowercase}.wave:nth-child(2),.wave:nth-child(3){top:210px}.playing .wave{border-radius:40%;animation:wave 3s linear infinite}.wave{border-radius:40%;animation:wave 55s linear infinite}.playing .wave:nth-child(2){animation-duration:4s}.wave:nth-child(2){animation-duration:50s}.playing .wave:nth-child(3){animation-duration:5s}.wave:nth-child(3){animation-duration:45s}@keyframes wave{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:1024px){.card-container{grid-template-columns:repeat(3,1fr);gap:15px;padding:15px}}@media (max-width:768px){.card-container{grid-template-columns:repeat(2,1fr);gap:15px;padding:15px}.e-card{max-width:100%}}@media (max-width:480px){.card-container{grid-template-columns:1fr;gap:10px;padding:10px}.e-card{height:300px}.infotop{font-size:18px;top:4.5em}.name{font-size:12px}}