.card-base{align-items:flex-start;aspect-ratio:150/210;border-radius:16px;display:flex;flex-shrink:0;overflow:hidden;position:relative;--card-base-overlay-border-clr:transparent;cursor:pointer;flex-basis:calc((100% - (var(--column-count) - 1)*var(--column-gap))/var(--column-count));scroll-snap-align:start}.card-base__preview{background:no-repeat 50%/50% var(--color-emerald-2) url(../img/thumb-preview.svg);border-radius:16px;height:100%;left:0;position:absolute;top:0;width:100%}@media (min-width:1024px){.card-base__preview{background-size:auto}}.card-base__favorite{align-items:center;background:var(--slate-400);border-radius:8px;display:flex;height:24px;justify-content:center;position:absolute;right:8px;top:12px;width:24px;z-index:5}.card-base__overlay{border:4px solid var(--card-base-overlay-border-clr);border-radius:16px;inset:0;position:absolute;transition:border-color .3s;z-index:2}.card-base__img{border:1px solid transparent;border-radius:16px;display:block;height:100%;position:absolute;width:100%}.card-base__info{align-items:center;background:#0c0b1299;border-radius:16px;display:flex;inset:0;justify-content:center;opacity:var(--opacity-info,0);position:var(--position-info,absolute);transition:opacity .3s;will-change:opacity;z-index:3}.card-base .btn-try{background:var(--neutral-600);bottom:12px;position:absolute;transition:background .3s}@media (hover:hover){.card-base .btn-try:hover{background:var(--neutral-700)}}.card-base .btn-play{align-items:center;aspect-ratio:56/56;display:flex;justify-content:center;position:relative;width:50%}.card-base .btn-play .icon{--color:var(--color-white);--icon-size:45%}.card-base .btn-play__overlay-hover{background:var(--primary-400)}.card-base .btn-play__overlay,.card-base .btn-play__overlay-hover{border-radius:50%;content:"";display:block;inset:0;position:absolute}.card-base .btn-play__overlay{background:var(--base-primary);transition:opacity .3s}.card-base .btn-play:before{border-radius:50%;content:"";display:block;inset:0;position:absolute;z-index:2}@media (hover:hover){.card-base .btn-play:hover .btn-play__overlay{opacity:0}}.card-base .btn-play .icon{z-index:3}.card-base__label{position:absolute;right:0;top:0;transform:translate(-1px,1px);z-index:1;--icon-size:40px;border-top-right-radius:12px}@media (hover:hover){.card-base:hover{--opacity-info:1;--card-base-overlay-border-clr:var(--slate-400)}}