.card{--background:#fff;--background-checkbox:#0082ff;--background-image:#fff,rgba(0,107,175,0.2);--text-color:#666;--text-headline:#000;--card-shadow:#0082ff;--card-height:140px;--card-width:200px;--card-radius:12px;--header-height:150px;--blend-mode:overlay;--transition:0.15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.card:nth-child(odd) .card__body-cover-image{--x-y1:100% 90%;--x-y2:67% 83%;--x-y3:33% 90%;--x-y4:0% 85%}.card:nth-child(2n) .card__body-cover-image{--x-y1:100% 85%;--x-y2:73% 93%;--x-y3:25% 85%;--x-y4:0% 90%}.card__input{position:absolute;display:block;outline:none;border:none;background:none;padding:0;margin:0;-webkit-appearance:none}.card__input:checked~.card__body{--shadow:0 0 0 3px var(--card-shadow)}.card__input:checked~.card__body .card__body-cover-checkbox{--check-bg:var(--background-checkbox);--check-border:#fff;--check-scale:1;--check-opacity:1}.card__input:checked~.card__body .card__body-cover-checkbox--svg{--stroke-color:#fff;--stroke-dashoffset:0}.card__input:checked~.card__body .card__body-cover:after{--opacity-bg:0}.card__input:checked~.card__body .card__body-cover-image{--filter-bg:grayscale(0)}.card__input:disabled~.card__body{cursor:not-allowed;opacity:.5}.card__input:disabled~.card__body:active{--scale:1}.card__body{display:grid;grid-auto-rows:calc(var(--card-height) - var(--header-height)) auto;background:var(--background);height:var(--card-height);width:var(--card-width);border-radius:var(--card-radius);overflow:hidden;position:relative;cursor:pointer;box-shadow:var(--shadow,0 4px 4px 0 rgba(0,0,0,.02));transition:transform var(--transition),box-shadow var(--transition);transform:scale(var(--scale,1)) translateZ(0);--shadow:0 0 0 1px #dbdbdb}.card__body:active{--scale:0.96}.card__body-cover{--c-border:var(--card-radius) var(--card-radius) 0 0;--c-width:100%;--c-height:100%;position:relative;overflow:hidden}.card__body-cover:after{content:"";position:absolute;left:0;top:0;background:linear-gradient(to bottom right,var(--background-image));mix-blend-mode:var(--blend-mode);opacity:var(--opacity-bg,1);transition:opacity var(--transition) linear}.card__body-cover-image,.card__body-cover:after{width:var(--c-width);height:var(--c-height);border-radius:var(--c-border)}.card__body-cover-image{-o-object-fit:cover;object-fit:cover;filter:var(--filter-bg,grayscale(1));clip-path:polygon(0 0,100% 0,var(--x-y1,100% 90%),var(--x-y2,67% 83%),var(--x-y3,33% 90%),var(--x-y4,0 85%))}.card__body-cover-checkbox{background:var(--check-bg,var(--background-checkbox));border:2px solid var(--check-border,#fff);position:absolute;right:10px;top:10px;z-index:1;width:28px;height:28px;border-radius:50%;opacity:var(--check-opacity,0);transition:transform var(--transition),opacity calc(var(--transition) * 1.2) linear;transform:scale(var(--check-scale,0))}.card__body-cover-checkbox--svg{width:13px;height:11px;display:inline-block;vertical-align:top;fill:none;margin:7px 0 0 5px;stroke:var(--stroke-color,#fff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:var(--stroke-dashoffset,16px);transition:stroke-dashoffset .4s ease var(--transition)}.card__body-header{height:var(--header-height);background:var(--background);padding:0 10px 10px}.card__body-header-title{color:var(--text-headline);font-weight:700;margin-bottom:8px}.card__body-header-subtitle{color:var(--text-color);font-weight:500;font-size:13px}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1rem}