.kol-tutorial-card,.kol-tutorial-hero-card{background:#fff;border-radius:.8rem;overflow:hidden}.kol-tutorial-card{box-shadow:0 0 1px #1414141f,0 4px 12px 2px #14141414}.kol-tutorial-card__media,.kol-tutorial-hero-card__media{position:relative;display:block;overflow:hidden;cursor:pointer}.kol-tutorial-card__media:after,.kol-tutorial-hero-card__media:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0000004d}.kol-tutorial-card__media img,.kol-tutorial-hero-card__media img,.kol-tutorial-card__avatar img,.kol-tutorial-hero-card__avatar img{display:block;width:100%;height:100%;object-fit:cover}.kol-tutorial-card__play,.kol-tutorial-hero-card__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5.6rem;height:5.6rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#e0e9ff;color:#1d4ed8;z-index:1}.kol-tutorial-card__play:hover path{transition:all .2s ease}.kol-tutorial-card__play:hover path:nth-child(1){fill:#002dc2}.kol-tutorial-card__play:hover path:nth-child(2){fill:#fff}.kol-tutorial-hero-card__play{width:6.4rem;height:6.4rem}.kol-tutorial-card__play .icon,.kol-tutorial-hero-card__play .icon{width:100%;height:100%}.kol-tutorial-card__content{position:relative;padding:clamp(10px,calc(20 * 100vw / 1920),20px) clamp(12px,1.25vw,24px) clamp(12px,1.25vw,24px)}.kol-tutorial-card__medal{position:absolute;top:50%;right:.5rem;width:11.4rem;height:11.4rem;transform:translateY(-52%);color:#98a2b3;pointer-events:none}.kol-tutorial-card__medal svg{display:block;width:100%;height:100%}.kol-tutorial-card__title,.kol-tutorial-hero-card__title{margin:0;color:#101828}.kol-tutorial-card__title{font-size:clamp(16px,calc(22 * 100vw / 1920),22px);font-weight:600;line-height:1.45}.kol-tutorial-card__tags,.kol-tutorial-hero-card__tags{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem}.kol-tutorial-card__tags{margin-top:clamp(8px,calc(10 * 100vw / 1920),10px)}.kol-tutorial-card__tag,.kol-tutorial-hero-card__tag{display:inline-flex;align-items:center;border-radius:999px;padding:clamp(4px,.3125vw,6px) clamp(6px,.625vw,12px);background:#f2f4f7;color:#475467;font-size:clamp(12px,calc(14 * 100vw / 1920),14px);font-weight:400;line-height:2rem}.kol-tutorial-card__tag--green,.kol-tutorial-hero-card__tag--green{background:#e3fbcc;color:#2b5314}.kol-tutorial-card__author,.kol-tutorial-hero-card__author{display:flex;align-items:center;gap:.8rem}.kol-tutorial-card__author{margin-top:1.6rem}.kol-tutorial-card__avatar{width:clamp(48px,2.8125vw,54px);height:clamp(48px,2.8125vw,54px);border-radius:999px;overflow:hidden;background:#f2f4f7}.kol-tutorial-hero-card__avatar{width:6.4rem;height:6.4rem;border-radius:999px;overflow:hidden;flex:0 0 auto;background:#f2f4f7}.kol-tutorial-card__author-name,.kol-tutorial-hero-card__author-name{margin:0;color:#101828;font-weight:500}.kol-tutorial-card__author-role,.kol-tutorial-hero-card__author-role{margin:0;color:#475467;font-weight:400}.kol-tutorial-card__author-name{font-size:clamp(14px,calc(16 * 100vw / 1920),16px);line-height:1.5}.kol-tutorial-card__author-role{font-size:clamp(12px,calc(14 * 100vw / 1920),14px);line-height:1.4}.kol-tutorial-hero-card__media{aspect-ratio:16 / 9}.kol-tutorial-hero-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000004d}.kol-tutorial-hero-card__title{position:absolute;top:5rem;left:5rem;z-index:2;color:#fff;font-size:calc(40 * 100vw / 1920);font-weight:600;line-height:1;text-shadow:0 1px 8px rgba(20,20,20,.08),0 0 1px rgba(20,20,20,.12)}.kol-tutorial-hero-card__footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 3.2rem}.kol-tutorial-hero-card__author-name{font-size:2rem;line-height:3rem}.kol-tutorial-hero-card__author-role{font-size:1.6rem;line-height:2.4rem}@media screen and (min-width:768px){.kol-tutorial-card__media{aspect-ratio:458.666 / 320}}@media screen and (max-width:989px){.kol-tutorial-card__tags{margin-top:clamp(8px,calc(10 * 100vw / 1920),15px)}.kol-tutorial-card__title{font-size:clamp(20px,calc(20 * 100vw / 375),30px);line-height:1.35}.kol-tutorial-hero-card__title{top:2.4rem;left:2.4rem;font-size:calc(20 * 100vw / 375)}.kol-tutorial-card__tag{font-size:clamp(14px,calc(14 * 100vw / 375),16px);padding:clamp(2px,calc(4 * 100vw / 375),8px) clamp(8px,3.2vw,20px)}.kol-tutorial-card__avatar{width:clamp(40px,12.8vw,0px);height:clamp(40px,12.8vw,60px)}.kol-tutorial-card__author-name{font-size:clamp(16px,calc(16 * 100vw / 375),24px)}.kol-tutorial-card__author-role{font-size:clamp(14px,calc(14 * 100vw / 375),20px)}.kol-tutorial-hero-card__footer{flex-direction:column;align-items:flex-start;padding:1.6rem 2rem 2rem}}@media screen and (max-width:589px){.classroom-tutorial-groups .kol-tutorial-card__medal{display:none}.kol-tutorial-card__media{height:26rem}.kol-tutorial-card__content{padding:1.6rem}.kol-tutorial-hero-card__title{font-size:calc(20 * 100vw / 375)}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/component-kol-tutorial-cards.css.map */