.cards {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
}

.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: 190px; */
    /* --card-width: 190px; */
    --card-radius: 12px;
    --header-height: 47px;
    --blend-mode: overlay;
    --transition: 0.15s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    padding: 10px;
  }
  .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(even) .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 1px 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: 0.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); */
    max-width: 300px;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 4px 0 rgba(0, 0, 0, 0.2));
    transition: transform var(--transition), box-shadow var(--transition);
    transform: scale(var(--scale, 1)) translateZ(0);
  }
  .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;
    min-height: 10px;
  }
  .card__body-cover:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--c-width);
    height: var(--c-height);
    border-radius: var(--c-border);
    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 {
    width: var(--c-width);
    height: var(--c-height);
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--c-border);
    filter: var(--filter-bg, grayscale(1));
    -webkit-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%));
            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 0.4s ease var(--transition);
  }
  .card__body-header {
    /* height: var(--header-height); */
    background: var(--background);
    padding: 0 10px 10px 10px;
  }
  .card__body-header-title {
    color: var(--text-headline);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: inherit;
  }
  .card__body-header-subtitle {
    color: var(--text-color);
    font-weight: 500;
    font-size: 13px;
    display: flex;
  }