.playlist-card-wrapper{--gap:30px;display:flex;flex-wrap:wrap;gap:var(--gap);width:100%}.playlist-card-item{flex:0 0 calc(25% - var(--gap) * 3 / 4);max-width:calc(25% - var(--gap) * 3 / 4);background-color:rgb(var(--playlist-bg-color),1);border-radius:15px;padding:24px 20px;width:100%;transition:all .3s ease}.playlist-card-item.mix-tape-card{padding:62px 48px 100px;flex:0 0 100%;max-width:100%;position:relative;overflow:hidden}.playlist-card-main-image{z-index:2}.playlist-card-main-image img{transition:.3s ease-in-out}.playlist-card-item:hover .playlist-card-main-image img{transform:translateY(-20px)}.playlist-card-main-image img{aspect-ratio:1.2409}.playlist-card-item:hover{background-color:rgb(var(--playlist-bg-color-hover),1)}.marquee-mixtape-wrapper{position:absolute;bottom:0;left:0;right:0;pointer-events:none}.playlist-card-wrapper .flickity-viewport{width:100%}.border-spacer{border-top:1px solid rgba(var(--playlist-border-color),1);width:100%;margin:14px 0;height:1px}.playlist-sub-title{margin-top:18px}.playlist-show-more{margin-top:20px}.sample-drawer-modal{--color-background: var(--playlist-bg-color);--color-border-light: var(--playlist-border-color)}.sample-drawer-modal .drawer__footer{border-top:1px solid rgba(var(--playlist-border-color),1)}.sample-drawer-modal .button--secondary{background:#fff}.playlist-show-more:before{content:"";position:absolute;bottom:-3px;right:0;width:100%;height:1px;background-color:#6c6d6d;transition:all .3s ease}.playlist-show-more:hover:before{width:0}.card-playlist-compare-price{text-decoration:line-through}@media (max-width: 1024px){.playlist-card-item{flex:0 0 100%;max-width:100%;width:40%;margin-right:16px;display:flex;flex-direction:column;justify-content:space-between}.playlist-mix-tape-content,.playlist-mix-tape-action-buttons{max-width:100%}.playlist-card-main-image{padding-inline:17px}}@media (max-width: 575px){.playlist-card-item,.playlist-card-item.mix-tape-card{width:77%;padding:20px 18px}.playlist-sub-title{font-size:11px}.card-playlist-price{font-size:13px}.playlist-sample-button{font-size:12px}.playlist-mix-tape-content .text-base{font-size:14px}}.playlist-card-bg-icon-wrapper{top:80%;transform:translateY(-80%);z-index:1}.playlist-card-bg-icon-wrapper img{padding-inline:27px}.playlist-card-item-bottom{flex:1 1 auto}.playlist-testing-notes{flex:1}.playlist-mix-tape-wrapper .playlist-title.h2{font-size:24px}.playlist-card-wrapper .flickity-viewport{overflow:visible}.marquee-image-slider-item{width:100%}.playlist-action-button{transition:all .3s ease}.playlist-action-button:hover{margin-left:-15px}.playlist-action-button:hover svg{right:-25px;opacity:1}.playlist-action-button svg{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:0;transition:all .3s ease}.playlist-card-item-top svg{top:14px;left:2px;scale:1.55}.chocolatey-comforts-icon,.fruity-classics-icon,.super-funky-adventures-icon,.dreamy-low-no-cafe-icon{opacity:0;transition:all .3s ease}.playlist-card-item.chocolatey-comforts:hover .chocolatey-comforts-icon,.playlist-card-item.fruity-classics:hover .fruity-classics-icon,.playlist-card-item.super-funky-adventures:hover .super-funky-adventures-icon,.playlist-card-item.dreamy-low-no-cafe:hover .dreamy-low-no-cafe-icon{opacity:1}.mixtape-card-icon .media{padding-top:var(--padding-top)}.mixtape-card-icon .media img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%}.mixtape-card-icon-wrapper .mixtape-card-icon{margin:0 auto}.mixtape-card-icon{max-width:var(--max-width)}.mixtape-card-icon-wrapper{max-width:370px}@media (min-width: 1025px){.playlist-mix-tape-wrapper{display:grid;grid-template-columns:4fr 8fr;gap:30px}.playlist-mix-tape-content-wrapper{display:grid;grid-template-columns:8fr 4fr;gap:30px}.playlist-mix-tape-wrapper .playlist-title.h2{font-size:42px}.marquee-image-slider-item{max-width:60%}.playlist-card-bg-icon-wrapper{top:70%;transform:translateY(-70%)}.playlist-card-bg-icon-wrapper img{padding-inline:14px}.border-spacer{margin:18px 0}}@media (min-width: 1440px){.playlist-mix-tape-wrapper{gap:68px}}.playlist-card-item:not(.mix-tape-card):hover .playlist-title{color:rgb(var(--playlist-price-color))}
/*# sourceMappingURL=/cdn/shop/t/49/assets/playlist-card.css.map */