.card__label {
    --background: #262626;
    background-color: transparent;
    --background-checkbox: #FFC916;
    --text-color: rgb(175, 175, 175);
    --text-headline: #fff;
    --card-shadow: #FFC916;
    height: 100%;
    min-height: 220px;
    max-height: 300px;
    --card-width: 190px;
    --card-radius: 20px;
    --header-height: 47px;
    --blend-mode: overlay;
    --transition: 0.15s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.card__label:nth-child(odd) .card__body-cover-image {
    --x-y1: 100% 90%;
    --x-y2: 67% 83%;
    --x-y3: 33% 90%;
    --x-y4: 0% 85%;
}

.card__label: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__body {
    padding: 10px;
}

.card__body-header h6 {
    margin-bottom: 10px;
}

.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: 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: 100%;
    min-height: 240px;
    max-height: 300px;
    width: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 4px 0 rgba(0, 0, 0, 0.02));
    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: 24px;
    --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);
    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-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: 10px 10px 10px 10px;
}

.card__body-header-title {
    color: var(--text-headline);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.5rem;
    margin-bottom: 8px;
}

.card__body-header-subtitle {
    color: var(--text-color);
    font-weight: 500;
    font-size: 16px;
}

* {
    box-sizing: inherit;
}

*:after {
    box-sizing: inherit;
}

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

@media only screen and (min-width: 0px) and (max-width: 667px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 1rem;
    }
}