// ── Card ───────────────────────────────────────────
.hl-card {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-sizing: border-box;
    pointer-events: auto;

    // ── Image ────────────────────────────────────────
    .hl-img-wrap {
        width: 100%;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: var(--hl-color-img-bg);
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: var(--hl-transition-img);
        }
    }

    &:hover .hl-img-wrap img {
        transform: scale(1.03);
    }

    // ── Timeline dot ─────────────────────────────────
    .hl-timeline-dot {
        position: relative;
        z-index: 1;
        width: var(--hl-dot-size);
        height: var(--hl-dot-size);
        border-radius: 50%;
        background: var(--noventi-color-berry);
        flex-shrink: 0;
        margin: 24px auto 16px;
        display: block;
    }



    // ── Body ─────────────────────────────────────────
    // Month + title render inline: "Januar: Headline text"
    .hl-card-body {
        padding-top: 0;

        .hl-card-title {
            font-size: clamp(16px, 1.1vw, 20px);
            font-weight: 700;
            color: var(--hl-color-text);
            line-height: 1.4;
            margin: 0 0 8px;
            display: inline;
        }

        .hl-card-text {
            // line-height: 1.75;
            color: var(--hl-color-text);
            margin: 8px 0 0;
            display: block;
        }
    }
}

.hl-row > div:first-child .hl-card .hl-timeline-dot{
    &::after {
        content: '';
        position: absolute;
        z-index: 0;
        left: -10000%;
        right: 0;
        top: 7px;
        border-bottom: 1px dotted #000;
        width: 10000px;
    }
}