.timeline-zig-zag {
    --timeline-dark: #204c7f;
    --timeline-light: #56b9e8;
    --timeline-title: #ffffff;
    --timeline-text: rgba(255, 255, 255, 0.84);
    --timeline-number-dark: rgba(7, 38, 78, 0.34);
    --timeline-number-light: rgba(6, 92, 152, 0.24);
    padding: clamp(56px, 8vw, 64px) 0 0 0;
    --timeline-dark-hover: #143152;
    --timeline-light-hover: hsl(199 76% 46% / 1);
    --timeline-number-dark-hover: rgb(1 5 9 / 34%);
    --timeline-number-light-hover: rgb(3 50 83 / 24%);
}

.timeline-zig-zag__wrap {
    margin: 0 auto 0 -25px;
    width: calc(100% + 50px);
}


.timeline-zig-zag__headline {
    padding: 0 20px;
    margin: 0 0 28px;
}

.timeline-zig-zag__title {
    margin: 0;
    color: #123b67;
    font-size: clamp(2rem, 2.6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
}

.timeline-zig-zag__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}


.timeline-zig-zag__card {
    position: relative;
    overflow: hidden;
    padding: clamp(20px, calc(64 / 1920 * 100vw), 64px) clamp(25px, calc(49 / 1920 * 100vw), 49px) 0;
    transition: background .3s ease-in-out;
}

.timeline-zig-zag__card--dark {
    background: var(--timeline-dark);
}
.timeline-zig-zag__card--dark:hover {
    background: var(--timeline-dark-hover);
}

.timeline-zig-zag__card--light {
    background: var(--timeline-light);
}
.timeline-zig-zag__card--light:hover {
    background: var(--timeline-light-hover);
}

.timeline-zig-zag__card-title {
    position: relative;
    z-index: 2;
    margin: 0 0 clamp(0px, calc(34 / 1920 * 100vw), 34px);
    color: var(--timeline-title);
    font-size: clamp(18px, calc(24 / 992 * 100vw), 24px);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}


.timeline-zig-zag__card-description {
    position: relative;
    z-index: 2;
    margin: 0;
    color: var(--timeline-text);
    font-size: clamp(15px, calc(17 / 992 * 100vw), 17px);
    font-weight: 400;
    line-height: 1.7;
}

.timeline-zig-zag__card-description a {
    color: white;
}

.timeline-zig-zag__number {
    position: absolute;
    z-index: 1;
    font-weight: 700;
    line-height: 1.2;
    user-select: none;
    right: clamp(14px, calc(19 / 1920 * 100vw), 19px);
    bottom: calc(clamp(0px, calc(19 / 1920 * 100vw), 19px) * -1);
    font-size: clamp(124px, calc(210 / 1920 * 100vw), 210px);
    transition: color .3s ease-in-out;
}

.timeline-zig-zag__card--dark .timeline-zig-zag__number {
    color: var(--timeline-number-dark);
}
.timeline-zig-zag__card--dark:hover .timeline-zig-zag__number {
    color: var(--timeline-number-dark-hover);
}

.timeline-zig-zag__card--light .timeline-zig-zag__number {
    color: var(--timeline-number-light);
}
.timeline-zig-zag__card--light:hover .timeline-zig-zag__number {
    color: var(--timeline-number-light-hover);
}

@media (min-width: 576px) {
    .timeline-zig-zag__headline {
        padding: 0;
    }

    .timeline-zig-zag__wrap {
        margin: 0 auto;
        width: 100%;
    }

    .timeline-zig-zag__card {
        min-height: clamp(400px, calc(470 / 1920 * 100vw), 470px);
        padding: clamp(0px, calc(64 / 992 * 100vw), 64px) clamp(0px, calc(49 / 992 * 100vw), 49px) 0;
    }

    .timeline-zig-zag__number {
        right: clamp(0px, calc(19 / 1920 * 100vw), 19px);
        font-size: clamp(150px, calc(210 / 1920 * 100vw), 210px);
    }

    .timeline-zig-zag__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timeline-zig-zag__card:nth-child(4n+3) {
        background: var(--timeline-light);
    }
    .timeline-zig-zag__card:nth-child(4n+3):hover {
        background: var(--timeline-light-hover);
    }

    .timeline-zig-zag__card:nth-child(4n) {
        background: var(--timeline-dark);
    }
    .timeline-zig-zag__card:nth-child(4n):hover {
        background: var(--timeline-dark-hover);
    }

    .timeline-zig-zag__card:nth-child(4n+3) .timeline-zig-zag__number {
        color: var(--timeline-number-light);
    }
    .timeline-zig-zag__card:nth-child(4n+3):hover .timeline-zig-zag__number {
        color: var(--timeline-number-light-hover);
    }

    .timeline-zig-zag__card:nth-child(4n) .timeline-zig-zag__number {
        color: var(--timeline-number-dark);
    }
    .timeline-zig-zag__card:nth-child(4n):hover .timeline-zig-zag__number {
        color: var(--timeline-number-dark-hover);
    }
}

@media (min-width: 992px) {

    .timeline-zig-zag__card {
        padding: clamp(0px, calc(64 / 1920 * 100vw), 64px) clamp(0px, calc(49 / 1920 * 100vw), 49px) 0;
    }

    .timeline-zig-zag__card-title {
        font-size: clamp(20px, calc(24 / 1920 * 100vw), 24px);
    }

    .timeline-zig-zag__card-description {
        font-size: clamp(15px, calc(19 / 1920 * 100vw), 19px);
    }

    .timeline-zig-zag__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .timeline-zig-zag__card:nth-child(odd) {
        background: var(--timeline-dark);
    }

    .timeline-zig-zag__card:nth-child(odd):hover {
        background: var(--timeline-dark-hover);
    }

    .timeline-zig-zag__card:nth-child(even) {
        background: var(--timeline-light);
    }
    .timeline-zig-zag__card:nth-child(even):hover {
        background: var(--timeline-light-hover);
    }

    .timeline-zig-zag__card:nth-child(odd) .timeline-zig-zag__number {
        color: var(--timeline-number-dark);
    }

    .timeline-zig-zag__card:nth-child(odd):hover .timeline-zig-zag__number {
        color: var(--timeline-number-dark-hover);
    }

    .timeline-zig-zag__card:nth-child(even) .timeline-zig-zag__number {
        color: var(--timeline-number-light);
    }
    .timeline-zig-zag__card:nth-child(even):hover .timeline-zig-zag__number {
        color: var(--timeline-number-light-hover);
    }


}

@media (min-width: 1300px) {
    .timeline-zig-zag__grid {
        padding: 0 clamp(0px, calc(68 / 1920 * 100vw), 68px)
    }
}