.history {
    @include breakpoint(xl) {
        margin: 190px 0 120px !important;
    }

    &__stats {
        @extend %container;

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 80px;
        list-style: none;
        gap: 30px;

        @include breakpoint(lg) {
            flex-direction: row;
            align-items: flex-start;
        }
    }

    &__stats-item {
        display: flex;
        flex-direction: column;
        gap: 30px;
        line-height: 1.22;
        font-size: 1.5rem;
        align-items: center;

        @include breakpoint(lg) {
            flex-direction: row;
            align-items: flex-start;
        }

        @include breakpoint(xl) {
            font-size: 2.25rem;
        }

        &:not(:last-child) {
            &::after {
                @include size(25px, 2px);

                content: '';
                color: var(--rocket-color-primary-200);
                font-weight: 700;
                background-color: var(--rocket-color-primary-200);

                @include breakpoint(lg) {
                    @include size(auto);

                    content: '|';
                    background-color: transparent;
                }
            }
        }
    }

    &__dates {
        padding: 95px 0 30px;
        background-color: var(--rocket-color-red-100);
        color: var(--rocket-color-white-base);

        .splide {
            &__list {
                min-width: 100%;
                justify-content: space-between;

                &::after {
                    @include size(10000%, 2px);

                    content: '';
                    display: block;
                    background-color: var(--rocket-color-white-base);
                    position: absolute;
                    bottom: 28px;
                    left: 1%;
                }
            }

            &__arrows {
                position: static;
                transform: none;
                width: 225px;
                margin: 0 auto;
                padding: 15px 0;
            }

            &__arrow {
                @include size(45px);

                box-shadow: none;
                color: var(--rocket-color-red-100);
            }

            &__slide {
                @include transition;

                padding-bottom: 56px;
                position: relative;
                min-width: 100px;
                font-size: 40px;
                font-weight: 600;
                line-height: 1;
                text-align: center;

                &::after {
                    @include transition;
                    @include size(24px);

                    content: '';
                    border: 0 solid var(--rocket-color-white-base);
                    background-color: var(--rocket-color-white-base);
                    border-radius: 50%;
                    position: absolute;
                    bottom: 16px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 2;
                }

                &:first-child {
                    text-align: left;
                }

                &:last-child {
                    text-align: right;
                }

                &:first-child::after,
                &:last-child::after, {
                    transform: none;
                }

                &:first-child::after {
                    left: 0;
                }

                &:last-child::after {
                    left: auto;
                    right: 0;
                }

                &.is-active {
                    font-size: 30px;

                    &::after {
                        @include size(37px);

                        border: 7px solid var(--rocket-color-white-base);
                        background-color: var(--rocket-color-red-100);
                        bottom: 10px;
                    }
                }
            }
        }
    }

    &__details {
        margin-top: 50px;
    }

    &__details-wrapper {
        display: flex;
        flex-direction: column;
        gap: 38px;

        @include breakpoint(lg) {
            flex-direction: row;
        }
    }

    &__details-image {
        display: block;
        flex-shrink: 0;
        width: 100%;

        @include breakpoint(lg) {
            max-width: 50%;
            width: auto;
        }

        img {
            width: 100%;
        }
    }

    &__details-content {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        row-gap: 40px;

        @include breakpoint(lg) {
            width: 1%;
        }
    }

    &__details-date {
        color: rgba(#000, .5);
        font-size: 20px;
    }

    &__details-title {
        @extend %base-styles-h3;
    }

    &__details-description {
        @extend %base-styles-text-lg;

        color: rgba(#000, .6);
    }
}