@media screen and (max-width:768px) {
    .timeline,
    .timeline-scroll .timeline {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 90%;
        padding-top: 0;
        overflow: visible;
    }

    .timeline-scroll {
        display: flex;
        justify-content: center;
    }

    .timeline-scroll.timeline-computer {
        display: none;
    }

    .timeline-phone {
        display: grid;
    }

    .timeline-arrow,
    .timeline-arrow[hidden] {
        display: none;
    }

    .timeline-year {
        position: static;
        display: block;
        padding: 12px 0 0 calc(var(--dot-row) + 12px);
        border: none;
        font-size: 22px;
    }

    .timeline-item::before,
    .timeline-item:first-child::before,
    .timeline-item:last-child::before {
        left: calc(var(--dot-row) / 2 - 1.5px);
        right: auto;
        top: 0;
        bottom: 0;
        width: 3px;
        height: auto;
    }

    /* The first concert always starts with its year above it. */
    .timeline-item:first-child::before {
        top: 55px;
    }

    .timeline-item:last-child::before {
        bottom: auto;
        height: 21px;
    }

    .timeline-item:last-child:has(.timeline-year)::before {
        height: 55px;
    }

    .timeline-link {
        grid-template-rows: auto;
        grid-template-columns: var(--dot-row) minmax(0, 1fr);
        column-gap: 12px;
        justify-items: start;
        padding: 10px 0;
        text-align: left;
    }

    .timeline-dot {
        grid-row: 1;
        grid-column: 1;
        align-self: start;
        justify-self: center;
        margin-top: 2px;
    }

    .timeline-label,
    .timeline-item:nth-child(even) .timeline-label {
        grid-row: 1;
        grid-column: 2;
        justify-content: flex-start;
        padding: 0;
    }

    .timeline-today {
        left: calc(var(--dot-row) / 2);
        top: 0;
    }

    .concert-meta {
        font-size: 17px;
    }

    .concert-stage-arrows {
        padding: 0 36px;
    }

    .concert-arrow {
        width: 30px;
        height: 46px;
        font-size: 20px;
    }

    .concert-text {
        font-size: 17px;
    }
}