.kalamun-card {
    container-name: kalamun-card;
    container-type: inline-size;
    --color-white: #fff;
    --color-xlight-grey: #e8edf1;
    --color-light-grey: #c2cfd9;
    --color-grey: #98a5ae;
    --color-dark-grey: #788289;
    --color-xdark-grey: #41464a;
    --color-black: #1d1d1d;

    --color-red: #d11b26;
    --color-blue: #006cbe;

    --box-shadow: 0 2px 10px 0 #0002;

    position: relative;
    padding: 1rem 0;
    height: 100%;
}
.kalamun-card .kalamun-card_prevent-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.kalamun-card[data-status="offline"] {
    cursor: not-allowed;
    filter: saturate(0) brightness(0.8);
}
.kalamun-card .kalamun-card_inner {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    height: 100%;
    background: var(--color-white);
    padding: 10px;
}
.kalamun-card .kalamun-card_image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 20 / 9;
    background: var(--color-grey);
}
.kalamun-card .kalamun-card_image .kalamun-card_thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 20 / 9;
    display: block;
}
.kalamun-card[data-layout="wide"] .kalamun-card_image {
    aspect-ratio: 40 / 9;
}
.kalamun-card[data-layout="wide"] .kalamun-card_image .kalamun-card_thumbnail {
    aspect-ratio: 40 / 9;
}

.kalamun-card .kalamun-card_status {
    position: absolute;
    top: 22%;
    right: 4%;
    color: var(--color-white);
    border-radius: 2em;
    display: block;
    line-height: 1;
    font-size: var(--font-size-normal);
    padding: 0.2em;
    text-shadow: 0 0 5px var(--color-black);
    box-shadow: 0 0 5px #0006;
    background: var(--color-green);
    border: 3px solid;
}
.kalamun-card .kalamun-card_status:is(.result-unknown, .result-failed) {
    background: var(--color-red);
}
.kalamun-card .kalamun-card_status:is(.result-passed) {
    background: var(--color-green);
}
.kalamun-card .kalamun-card_status .score {
    padding: 0 0.2em;
}
.kalamun-card .kalamun-card_status [class^="icon-"] {
    font-size: var(--font-size-normal);
}

.kalamun-card .kalamun-card_prgbar {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-white);
    padding-bottom: 6px;
}
.kalamun-card .kalamun-card_prgbar .dci-meter .dci-meter-value {
    bottom: 0 !important;
    line-height: 100%;
    z-index: 100;
    font-size: var(--font-size-xxxsmall);
}
.kalamun-card .kalamun-card_prgbar.empty::after {
    font-size: var(--font-size-xxsmall);
    content: '';
    display: block;
    height: 1em;
    width: 100%;
    border-radius: 1em;
    background-color: var(--color-light-grey);
}

.kalamun-card .kalamun-card_learning-time {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
    color: var(--color-white);
    text-shadow: 0 0 5px var(--color-black);
    pointer-events: none;
}

.kalamun-card .kalamun-card_body {
    display: flex;
    flex-direction: column;
    padding: 0.5em 0.8em 0 0.8em;
    gap: 1em;
    justify-content: space-between;
    flex-basis: 100%;
    word-wrap: break-word;
    line-height: 1.2;
    color: var(--color-black);
}
.kalamun-card .kalamun-card_title a {
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-black);
}
.kalamun-card .kalamun-card_description {
    color: var(--color-grey);
    font-size: 0.8em;
}
.kalamun-card .kalamun-card_cta {
    text-align: center !important;
}
.kalamun-card[data-layout="wide"] .kalamun-card_cta {
    position: absolute;
    bottom: 28px;
    right: 10px;
}

.kalamun-card .kalamun-card_progress,
.kalamun-card .kalamun-card_noprogress {
    font-size: var(--font-size-xsmall);
    font-weight: bold;
    color: var(--color-blue);
}

.kalamun-card .kalamun-card_body > div {
    text-align: left;
}
.kalamun-card .kalamun-card_progress {
    margin-top: 0.5em;
}

.kalamun-card .kalamun-card_timing {
    color: var(--color-black);
}
.kalamun-card_main-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kalamun-card_main-icon svg {
    width: min(6rem, 30%);
    height: auto;
    aspect-ratio: 1/1;
    margin-bottom: min(3rem, 30%);
    fill: white;
}