.cb__timeline {
    --timeline-gap: 4rem;
    --timeline-path-width: 2px;
    --timeline-path-color: var(--color-secondary);
    --timeline-marker-color: var(--color-primary);
    --timeline-marker-size: 0.5rem;
    --timeline-marker-margin: calc(var(--timeline-gap) / 2);
}

.cb__timeline__list {
    overflow: hidden;

    display: grid;
    grid-template-rows: auto auto;
    grid-auto-columns: 120px calc(100% - 120px);

}
.cb__timeline__list-item {
    position: relative;
    display: flex;
    gap: var(--timeline-gap);

    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
}
.cb__timeline__list-item__body {
    position: relative;
    padding-bottom: 1rem;
    max-width: 100%;
}

.cb__timeline__list-item__body:before {
    content: "";
    display: block;
    width: var(--timeline-path-width);
    height: 100%;
    background-color: var(--timeline-path-color);
    position: absolute;
    top: 0;
    left: calc((var(--timeline-marker-margin) * -1));
    transform: translateX(-50%);
}
.cb__timeline__list-item__body:after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    position: absolute;
    top: 0;
    left: calc((var(--timeline-marker-margin) * -1));
    transform: translateX(-50%);
}

.cb__timeline__list-item__time {
    font-weight: bold;
    font-size: 2rem;
    line-height: 1;
}
.cb__timeline__list-item__header {
    margin-bottom: 0.5rem
}
.cb__timeline__list-item .header {
    display: block;
    font-weight: bold;
    font-size: 1.25rem;
}
.cb__timeline__list-item .subheader {
    display: block;
}

.details-content-images {

}

:root {
    interpolate-size: allow-keywords; /* 👈 */
}
/* Truncate Box */
.truncate-box {
    transition: all 0.5s ease-in-out allow-discrete;
    overflow: hidden;
    max-height: calc-size(max-content, size);

    &.cropped {
        max-height: 500px;
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    }
}
.truncate-box__trigger {
    display: none;
    &.cropped {
        display: block;
    }
}