.card {
    padding: 4px;
    background: transparent;
}

.card-content-wrapper {
    color: var(--color-gray-700);
    /* border: 2px solid transparent; */
    border-radius: 4px;
    background-color: var(--color-white);
}

.card-content-wrapper.source:hover,
.card-content-wrapper.source:hover li {
    color: var(--color-source-400);
    background-color: var(--color-source-100);
}

.card-content-wrapper.source:hover .source:before {
    background-color: var(--color-source-400);
}

.card-content-wrapper.proposal:hover {
    color: var(--color-proposal-400);
    background-color: var(--color-proposal-100);
}

.card-content-wrapper.translation:hover,
.card-content-wrapper.translation:hover li {
    color: var(--color-translation-400);
    background-color: var(--color-translation-100);
}

.card-content-wrapper.translation:hover .translation:before {
    background-color: var(--color-translation-400);
}

.card-content-wrapper.celebration:hover,
.card-content-wrapper.celebration:hover li {
    color: var(--color-celebration-100);
    background-color: var(--color-celebration-200);
}

.card-content-wrapper.celebration:hover .celebration:before {
    background-color: var(--color-celebration-100);
}

.card .category {
    display: grid;
    grid-template-columns: 10px 1fr;
    padding: 6px 5px 5px 7px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
}

.card .category::before {
    display: inline-block;
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 50%;
}

@media screen and (max-width: 50rem) {
    .card .category {
        font-size: var(--text-2xs);
    }
}

.card .category.source {
    color: var(--color-source);
}

.card .category.source:before {
    background: var(--color-source);
}

.card .category.proposal {
    color: var(--color-proposal-300);
}

.card .category.proposal:before {
    background: var(--color-proposal-300);
}

.card .category.translation {
    color: var(--color-translation-300);
}

.card .category.translation:before {
    background: var(--color-translation-300);
}

.card .category.celebration {
    color: var(--color-celebration-300);
}

.card .category.celebration:before {
    background: var(--color-celebration-300);
}

.card h3 {
    padding: 12px 7px;
}

.card img {
    width: 100%;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    position: relative;
    overflow: hidden;
}


/* .card img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
} */

.card video {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}


/* .card video:hover {
  filter: none;
} */