.card{border-radius:var(--radius);border:.5px solid rgba(225,225,225,.1);padding:1.5rem;background-color:var(--purple);box-shadow:0 20px 40px #45454533;display:flex;flex-direction:column}.imgContainer{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:var(--radius);border:.5px solid rgba(225,225,225,.1);box-shadow:0 20px 40px #45454533;margin-bottom:1rem;display:flex;justify-content:center;align-items:center}.playIcon{position:absolute;opacity:.8;width:100px;fill:#a68ff8}.card-img{object-fit:cover;object-position:center;display:block;height:100%;width:100%}.song{font-weight:600;color:#a68ff8;text-shadow:0 20px 40px rgba(0,0,0,1);letter-spacing:1px}.artist{text-transform:uppercase;color:#947fdf;opacity:.9;letter-spacing:1.5px}.released{opacity:.7;color:#8b7aca}.audio{width:100%;opacity:.5;margin-top:1rem;background:var(--purple);cursor:pointer}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-template-rows:repeat(auto-fit,minmax(200px,1fr));gap:5rem;margin-top:3rem;margin-bottom:2rem}@media(min-width:768px){.cards{gap:2.2rem}}.app-title{color:#a68ff8}@media(max-width:500px){.app-title{text-align:center}}*{padding:0;margin:0;box-sizing:border-box}:root{--font-family: "Roboto", sans-serif;--purple: rgb(49, 0, 84);--dark: rgb(16, 16, 16);--light: rgb(232, 232, 232);--radius: 22px}body{background-color:var(--dark);color:var(--light);font-family:var(--font-family);min-height:100vh;padding-block:2.5rem;padding-inline:2rem}h1{margin-bottom:1.5rem}h3{text-transform:uppercase;font-size:18px}p{line-height:1.7;letter-spacing:.3px}