/* Standard CARD-BLOCK */

.card-block {
    --bw: 4px;
    --accent: #fff;

    padding: 2.4rem 3rem;

    display: grid;
    justify-items: start;
    gap: 1.6rem;

    background-color: var(--main-col2);
    border-radius: 6px;

    border-left: var(--bw) solid var(--accent);
    transition: box-shadow 0.35s;

    position: relative;
    isolation: isolate;

    /* Якщо в картці є виділені елементи тексту, то зменшую контраст основного тексту картки  */
    &:has(:is(u, b, strong)) .text {
        color: var(--font-col-300);
    }
}

.card-block.-yellow {
    --accent: var(--yellow);
}
.card-block.-blue {
    --accent: var(--blue5B);
}

.card-block .sticker {
    position: absolute;
    top: 0; left: 0;

    width: 48px; height: 48px;
    transform: translate(calc(-50% - var(--bw)/2), 50%);
    transition: box-shadow 0.25s;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--accent);
    border-radius: 50%;

    z-index: 1;
}

.card-block .sticker svg {
    color: #000;
}

.card-block:is(:hover, :focus-within) {
    box-shadow:
        -3px 0 2px 0
        hsla(from var(--accent) h s l / 0.5)
    ;

    & .sticker {
        box-shadow: 0 0 2px 7px hsla(from var(--accent) h s l / 0.5);
    }
}