.cc-card{--cc-radius: 10px;--cc-bg: #F6F6F6;--cc-ratio: 1 / 1;--cc-pad: 14px;--cc-title-strip: 38px;--cc-title-color: #ffffff;--cc-title-color-hover: #2b2926;--cc-title-size: 16px;--cc-title-weight: 400;--cc-duration: .45s;position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:var(--cc-ratio);overflow:hidden;border-radius:var(--cc-radius);background-color:var(--cc-bg);text-decoration:none;isolation:isolate}.cc-card__media{position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;transition:opacity var(--cc-duration) ease}.cc-card__media img,.cc-card__media svg{display:block;width:100%;height:100%;object-fit:cover}.cc-card__hover{position:absolute;z-index:0;inset:var(--cc-pad) var(--cc-pad) var(--cc-title-strip) var(--cc-pad);display:block;opacity:0;transition:opacity var(--cc-duration) ease;pointer-events:none}.cc-card__hover img{display:block;width:100%;height:100%;object-fit:contain}.cc-card__title{position:absolute;z-index:2;inset:auto 0 5px 0;display:flex;align-items:center;justify-content:center;height:var(--cc-title-strip);margin:0;padding:0 10px;box-sizing:border-box;font-family:inherit;font-size:var(--cc-title-size);font-weight:var(--cc-title-weight);line-height:1.3;letter-spacing:0;text-align:center;color:var(--cc-title-color);transition:color var(--cc-duration) ease;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media screen and (min-width:750px){.cc-card{--cc-radius: 20px;--cc-pad: 22px;--cc-title-strip: 46px;--cc-title-size: 24px}.cc-card__title{inset:auto 0 20px 0}}.cc-card--has-hover.cc-card--is-hovered .cc-card__media,.cc-card--has-hover:focus-visible .cc-card__media{opacity:0}.cc-card--has-hover.cc-card--is-hovered .cc-card__hover,.cc-card--has-hover:focus-visible .cc-card__hover{opacity:1}.cc-card--has-hover.cc-card--is-hovered .cc-card__title,.cc-card--has-hover:focus-visible .cc-card__title{color:var(--cc-title-color-hover)}@media(hover:hover){.cc-card--has-hover:hover .cc-card__media{opacity:0}.cc-card--has-hover:hover .cc-card__hover{opacity:1}.cc-card--has-hover:hover .cc-card__title{color:var(--cc-title-color-hover)}}.cc-card:focus-visible{outline:2px solid var(--cc-title-color-hover);outline-offset:2px}.cc-card:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){.cc-card__media,.cc-card__hover,.cc-card__title{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-collection-card.css.map */