.history {
    font-size: 24px;
    font-weight: 700;

    .history-item {
        min-height: 80px;

        .date {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            background-color: @secondary;
            color: @on-secondary;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            position: absolute;
            top: -21px;
            left: calc(50% - 40px);
        }
        .text {
            width: 41%;
        }

        &:nth-child(odd) {
            .text {
                margin-left: auto;
            }
        }

        & ~ .history-item {
            margin-top: @space-md;
        }

        @media (max-width: 900px) {
            .date {
                left: 0;
            }
            &:nth-child(odd),
            &:nth-child(even) {
                .text {
                    width: 100%;
                    padding-left: 100px;
                    font-size: 0.7em;
                }
            }
        }
    }
}
