@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";.section__album{margin-top:50px}.single-container,.album-container{display:grid;grid-template-columns:repeat(4,minmax(300px,1fr));gap:30px}.single-wrapper,.album-wrapper{margin-top:100px}.album__list .coverImage img{border-radius:var(--radius)}.section__album .album-title,.section__album .artist-name{cursor:pointer;width:fit-content;position:relative;transition:color .3s ease-in-out;padding-bottom:1px;border-bottom:2px solid transparent;display:block;margin:10px 0 5px}.section__album .album-title{font-weight:600;font-size:14px;color:var(--clr-white)}.section__album .artist-name,.section__album .separator{font-size:14px;color:var(--clr-artist-title);display:inline}.section__album .artist-name:hover,.section__album .album-title:hover{border-bottom:2px solid var(--clr-white);color:var(--clr-white)}.section__album .coverImage{position:relative;display:flex;justify-content:center;align-items:center}.section__album .coverImage:before{content:"";position:absolute;background-color:#00000080;border-radius:var(--radius);width:100%;height:100%;opacity:0;transition:opacity .5s ease-out .1s}.section__album .coverImage:hover:before{opacity:1}.section__album .coverImage:hover .play-icons-container{display:flex;justify-content:center}.section__album .coverImage .play-icons-container{display:none;position:absolute}.section__album .coverImage .play-icon{filter:invert(80%);transition:all .6s ease-in-out;cursor:pointer}.section__album .coverImage .play-icon:hover{scale:1.2;filter:invert(100%)}.section__album .coverImage .play-icon{margin:0 20px;width:60px}.section__album .coverImage .dots,.section__album .coverImage .heart{width:30px}@media (max-width: 1400px){.album-container,.single-container{grid-template-columns:repeat(2,minmax(150px,1fr))}.section__album .coverImage .play-icon{margin:0 15px}}@media (max-width: 740px){.album-container,.single-container{grid-template-columns:repeat(1,minmax(100px,1fr))}}.hero-container{max-width:2000px;margin:0 auto 50px;width:100%;height:500px;position:relative}.hero-container:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:50%;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.hero-container img{width:100%;height:100%;object-fit:cover}.hero-text{padding:20px;position:absolute;bottom:0}.hero-text h1{margin:0}.hero-text p{font-size:18px}.hero-text .listeners{font-weight:600}@media (max-width: 900px){.hero-container{height:300px}.hero-text h1{font-size:30px}}.section__playlist{background-color:var(--clr-primary)}.section__playlist h2{font-size:18px}.playlist-container{display:flex;max-height:600px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.playlist-items,.new-release{display:block;width:50%}.playlist-items{overflow:scroll;margin-right:10px}.new-release{overflow:hidden;margin-left:10px;position:relative;border-radius:var(--radius)}.new-release:before{content:"";width:100%;height:100%;position:absolute;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);z-index:50}.new-release .artist-name,.new-release .new-music{left:30px;z-index:100;font-weight:900;position:absolute}.new-release .artist-name{font-size:60px;bottom:0}.new-release a{position:relative;z-index:100}.new-release img{object-fit:cover;height:100%}.new-release .new-music{font-size:18px;bottom:100px}.playlist-item{display:flex;background-color:var(--clr-secondary);position:relative;padding:var(--general-mini-padding);margin:10px 20px 10px 0}.playlist-item:first-child{margin-top:0}.playlist-item img{width:90px}.playlist-item .coverImage{display:flex;align-items:center}.play-icons-container{display:flex;flex-direction:row;margin-left:auto}.playlist-items{border-radius:var(--radius)}.playlist-items a{font-size:14px}.playlist-item .play-icon{cursor:pointer;width:30px;filter:invert(80%);transition:all .5s ease-in-out;margin:0 10px}.playlist-item .play-icon:hover{scale:1.2;filter:invert(100%)}.playlist-item .dots,.playlist-item .heart{position:relative;width:20px}.playlist-item .description{font-size:13px}.playlist-info{padding-left:var(--general-mini-padding);display:flex;flex-direction:column;justify-content:center}.playlist-info .album-title{font-size:14px;margin-bottom:5px}.playlist-info .description{font-size:14px;color:var(--clr-artist-title)}.playlist-icons{display:flex;align-items:center}@media (max-width: 1200px){.section__playlist .playlist-items{width:100%;margin-right:0}.section__playlist .new-release{display:none}}@media (max-width: 550px){.section__playlist .playlist-item{flex-direction:column;margin-right:0}.section__playlist .play-icons-container{position:absolute;right:0;top:40px;flex-direction:column;align-items:center}.section__playlist .playlist-info{margin-top:20px}.section__playlist .playlist-item .play{top:-16px;position:relative}.section__playlist .playlist-item .dots,.section__playlist .playlist-item .heart{position:relative;top:-30px}.section__playlist .playlist-item .dots{top:-5px}}footer{max-width:2000px;margin:100px auto 0;padding:var(--general-padding);display:flex;justify-content:center;align-items:center;background:var(--clr-primary)}footer a{margin:0 10px;opacity:.7;transition:all .5s ease-in-out}footer a:hover{opacity:1;scale:1.1}footer img{width:50px}*{margin:0;padding:0;box-sizing:border-box}:root{--clr-primary: #000;--clr-secondary: #111;--clr-artist-title: #a0a0a0;--clr-primary-dark: #101115;--clr-primary-light: #262a35;--clr-grey-1: #102a42;--clr-grey-5: #7c7c7c;--clr-grey-6: #64666a;--clr-grey-10: #f1f5f8;--clr-white: #fff;--clr-black: #000;--clr-text: #333;--clr-red-light: hsl(360, 71%, 66%);--radius: .5rem;--general-large-padding: 100px;--general-padding: 35px;--general-smaller-padding: 20px;--general-mini-padding: 10px}html{font-size:clamp(16px,1.2vw,32px);scroll-behavior:smooth}body{background:var(--clr-primary);color:var(--clr-white);position:relative;font-family:Helvetica,Montserrat,sans-serif;max-width:100vw;min-height:100vh}main{max-width:2000px;margin:0 auto;letter-spacing:.01em;padding:0 3em}h1,h2,h3{margin:0}h1,h2,h3,h4,h5,h6{line-height:1.25;margin-bottom:.75rem}h1{font-size:4rem}h2{font-size:18px}h3{font-size:1rem}h4{font-size:.875rem}p{margin-bottom:.25rem;line-height:1.5em;font-weight:300}ul li{list-style:none;font-weight:300;line-height:1.5}a{text-decoration:none;color:var(--crl-white);cursor:pointer}img{width:100%;display:block}@media (max-width: 1400px){main{padding:0 1.5em}}