.timeline {
    position: relative;
    width: 80%;
    margin: 50px auto;
    padding: 20px 0;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: white;
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0;
    position: relative;
}

.timeline-content p {
    color: white;
    font-family: 'gotham';
    font-size: 20px;
}

.timeline-content .timeline-date {
    color: #F5C5C8;
    font-family: 'bodoni';
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 3%;
}

.timeline-item .timeline-content {
    width: 40%;
}

.timeline-item .timeline-image {
    width: 40%;
}

.timeline-item .timeline-image img {
    width: 100%;
    border-radius: 8px;
}

.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17.5px;
    height: 17.5px;
    background: #EB797F;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Alternanza: testo a sx immagine a dx */
.timeline-item.left .timeline-content {
    order: 1;
    text-align: right;
}

.timeline-item.left .timeline-image {
    order: 2;
}

/* Alternanza: immagine a sx testo a dx */
.timeline-item.right .timeline-content {
    order: 2;
    text-align: left;
}

.timeline-item.right .timeline-image {
    order: 1;
}

.timeline-item {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}