.timelineItemsContainer {
    --inset: 3rem;
    --betweenHeight: min(8vw, 8em);
    --spotcolor-1: var(--sapphire-100);
    --spotcolor-2: var(--papaya);
}

.timelineItemsContainer__section {
    position: relative;
    padding-left: 2em;
    box-shadow: 8px 0 0 var(--spotcolor-1) inset;
}

.timelineItemsContainer__side--main,
.timelineItemsContainer__section:last-of-type .timelineItemsContainer__between {
        stroke-dasharray: 0 15;
}

.timelineItemsContainer__title {
    padding-right: 7rem;
}

.timelineItemsContainer__between,
.timelineItemsContainer__side {
    display: none;
    stroke-linecap: round;
}

.timelineItemsContainer__dot {
    position: absolute;
    top: 4.2rem;
    left: -7px;
    width: 22px;
    transform: translateY(-50%);
}

@media screen and (min-width:720px) {
    .timelineItemsContainer {
        --inset: 8rem;
    }

    .timelineItemsContainer__section {
        padding-left: 0;
        box-shadow: none;
        padding-bottom: calc(var(--betweenHeight) - -4px);
    }

    .timelineItemsContainer__between {
        display: initial;
        position: absolute;
        left: var(--inset);
        right: var(--inset);
        bottom: 0;
        z-index: -1;
        height: var(--betweenHeight);
        width: calc(100% - (2 * var(--inset)));
    }

    .timelineItemsContainer__side {
        display: initial;
        position: absolute;
        top: 0;
        bottom: 10rem;
        left: var(--inset);
        z-index: -2;
        height: calc(100% - var(--betweenHeight));
        width: calc(100% - (2 * var(--inset)));
    }

    .timelineItemsContainer__section--left {
        .timelineItemsContainer__dot {
            top: calc((100% - var(--betweenHeight)) / 2);
            left: calc(var(--inset) - 4px);
        }
    }

    .timelineItemsContainer__section--right {
        .timelineItemsContainer__dot {
            top: calc(50% - (var(--betweenHeight) / 2));
            right: calc(var(--inset) - 4px);
            left: unset;
        }
    }
}

@media screen and (min-width:720px) {
    .timelineItemsContainer {
        --inset: min(15vw, 12rem);
    }
}