.card {
    --background: #fff;
    --background-checkbox: #111111;
    --background-image: #fff, rgba(0, 107, 175, 0.2);
    --text-color: #666;
    --text-headline: #000;
    --card-shadow: #111111;
    --card-width: 100%;
    --card-radius: 12px;
    --blend-mode: overlay;
    --transition: 0.15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.card input{
    display: none !important;
}

.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: 0 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none
}

.card__input:checked~.card__body {
    box-shadow: 0 0 0 3px var(--card-shadow) !important;
}

.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) - 50px) 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 0px 0px 0 rgba(0, 0, 0, 0.02));
    transition: transform var(--transition), box-shadow var(--transition);
    transform: scale(var(--scale, 1)) translateZ(0)
}
.card__body:checked {
    box-shadow: var(--shadow, 0 0px 0px 0 rgba(0, 0, 0, 0.02));
}

.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;
    width: var(--c-width);
    height: var(--c-height);
}

.card__body-cover-image {
    width: var(--c-width);
    height: var(--c-height);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--c-border);
}

.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: 8px 0 0 7px;
    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
}

.card__body-header-title {
    font-size: 13px;
}

.card__body-header.no-image {
    margin-top: 10px;
}

.card__body-header-subtitle {
    font-size: 14px;
    margin-bottom: 7px;
}

body .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem
}