#archive-comparisons {
    .archive-links {
        .main-title {
            margin-bottom: 44px;
        }
        .links {
            max-width: 1008px;
            margin-left: auto;
            margin-right: auto;
            display: grid;
            grid-template-columns: repeat(3,auto);
            gap: 111px;
        }
        .array-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            &:nth-child(1) {
                padding-right: 10px;
                &:before {
                    content: "";
                    width: 1px;
                    height: 100%;
                    top: 0;
                    right: -18%;
                    background: rgba(10, 13, 18, 0.08);
                    position: absolute;
                }
            }
            &:nth-child(2) {
                padding-right: 10px;
                &:before {
                    content: "";
                    width: 1px;
                    height: 100%;
                    top: 0;
                    right: -24%;
                    background: rgba(10, 13, 18, 0.08);
                    position: absolute;
                }
            }
        }
        .link-item {
            display: flex;
            align-items: center;
            gap: 4px;
            .icon {
                width: 20px;
                height: 20px;
                min-width: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .link-name {
                font-weight: 500;
                font-size: 18px;
                line-height: 133%;
                color: var(--grey-600);
                letter-spacing: -0.005rem;
                transition: 0.3s;
            }
            &:hover {
                .link-name {
                    color: #3064e9;
                }
            }
        }
    }

    .compare {
        max-width: 1008px;
        margin-left: auto;
        margin-right: auto;
        .block-subtitle {
            letter-spacing: unset;
        }
        .compare-table {
            display: flex;
            border: 1px solid var(--grey-150);
            border-radius: 8px;
            overflow: hidden;
        }
        .first-column {
            min-width: 28.5%;
            width: 28.5%;
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            .compare-head-element {
                justify-content: flex-end;
            }
            .column-element {
                padding: 20px 20px 12px;
                font-weight: 500;
                font-size: 16px;
                line-height: 138%;
                color: var(--black);
                text-align: left;
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                &:last-child {
                    border-bottom: unset;
                }
            }
        }
        .column {
            display: flex;
            flex-direction: column;
            width: calc((100% - 28%) / 4);
            min-width: calc((100% - 28%) / 4);
            border-right: 1px solid rgba(0, 0, 0, 0.1);
            flex-grow: 1;
            transition: 0.3s;
            .column-element {
                padding: 20px 20px 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                text-align: left;
                &:last-child {
                    border-bottom: unset;
                }
            }
            &.prev {
                opacity: 0;
                pointer-events: none;
            }
        }
        .controllers-holder {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24px;
            justify-content: flex-end;
            .controllers-desc {
                font-weight: 600;
                font-size: 18px;
                line-height: 133%;
                text-align: center;
                color: var(--black);
                max-width: 180px;
                margin-bottom: 24px;
            }
            .controllers-btns {
                display: flex;
                align-items: center;
                gap: 20px;
            }
            .controllers-btn {
                cursor: pointer;
                width: 40px;
                height: 40px;
                min-width: 40px;
                border-radius: 8px;
                background: #000;
                border: 1px solid #000;
                display: flex;
                align-items: center;
                justify-content: center;
                &.swiper-button-prev {
                    border: 1px solid var(--grey-350);
                    background: transparent;
                    &:hover {
                        border: 1px solid var(--grey-350);
                        background: var(--background-button-bg-secondary-hover);
                    }
                }
                &:hover {
                    border-color: var(--background-button-bg-primary-hover);
                    background: var(--background-button-bg-primary-hover);
                }
            }
        }
        .compare-table-head {
            display: flex;
        }
        .compare-head-element {
            padding: 24px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-weight: 600;
            font-size: 18px;
            line-height: 133%;
            text-align: center;
            color: var(--black);
            letter-spacing: -0.005rem;
            height: 189px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            .head-element-title {
                font-weight: 600;
                font-size: 18px;
                line-height: 133%;
                text-align: center;
                color: var(--black);
            }
            .btn {
                margin-top: 12px;
            }
        }
        .main-column {
            background: linear-gradient(180deg, rgba(248, 248, 248, 0.1) 3.5%, rgba(0, 0, 0, 0.06) 100%);
            .main-item {
                display: flex;
                gap: 12px;
            }
            .main-logo {
                width: 50px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                & img,
                & svg {
                    width: auto;
                    height: auto;
                    display: block;
                    object-fit: contain;
                    max-width: 100%;
                    max-height: 100%;
                }
            }
            .column-element {
                align-items: center;
                text-align: center;
            }
        }
        .swiper {
            margin-right: -2px;
            .swiper-wrapper {
                transition-timing-function: linear;
            }
            .swiper-slide {
                border-right: 1px solid rgba(0, 0, 0, 0.1);
                .column {
                    border-right: unset;
                }
            }
            .swiper-slide:last-child {
                border-right: unset;
            }
            .column {
                width: 100%;
            }
        }
        .swiper-button-prev,
        .swiper-button-next {
            position: static;
            margin-top: unset;
            transition: 0.3s;
            & svg {
                width: 14px;
                height: 24px;
            }
        }
        .swiper {
            width: 100%;
        }
    }

    @media (max-width: 996px) { 
        .archive-links {
            .links {
                gap: 20px;
            }
            .array-group {
                &:nth-child(1) {
                    &:before {
                        right: 0%;
                    }
                }
                &:nth-child(2) {
                    &:before {
                        right: 0%;
                    }
                }
            }
            .main-title {
                margin-bottom: 32px;
                text-align: center;
            }
        }
        .compare {
            .column {
                width: calc((100% - 28%) / 3);
                min-width: calc((100% - 28%) / 3);
            }
        }
        .main-title {
            text-align: center;
        }
    }
    @media (max-width: 768px) { 
        .archive-links {
            .links {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            .array-group:before {
                display: none !important;
                padding-right: unset !important;
            }
        }

        .compare {
            .main-title {
                letter-spacing: unset;
            }
            .first-column {
                min-width: calc(100% / 3);
                width: calc(100% / 3);
                .column-element {
                    word-break: break-all;
                }
            }
            .column {
                width: calc(100% / 3);
                min-width: calc(100% / 3);
            }
            .main-column {
                .main-logo {
                    width: 36px;
                    height: 32px;
                }
                .main-item {
                    gap: 10px;
                }
            }
            .compare-head-element {
                font-size: 12px;
                height: 143px;
                padding: 16px 12px;
                .head-element-title {
                    font-size: 12px;
                }
                .btn {
                    font-size: 12px;
                    padding: 8px 12px;
                    margin-top: 9px;
                }
            }
            & .controllers-holder {
                .controllers-desc {
                    font-size: 12px;
                }
                .controllers-btns {
                    .controllers-btn {
                        width: 32px;
                        height: 32px;
                        min-width: 32px;
                    }
                }
            }
        }
        .column-element {
            padding: 8px 12px !important;
            font-size: 12px !important;
        }
    }
}