.versus-block {
    padding: 80px 0px;
    .wrapper {
        display: flex;
        align-items: center;
        gap: 60px;
        justify-content: space-between;
        padding: 0px 15px;
    }
    .left-side {
        display: flex;
        flex-direction: column;
        width: calc(44% - 30px);
        max-width: 499px;
    }
    .subtitle {
        font-weight: 600;
        font-size: 12px;
        line-height: 133%;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        background: linear-gradient(149.42deg, #30cbe9 0.09%, #3126a0 84.54%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 16px;
    }
    .main-title {
        text-align: left;
        letter-spacing: -0.005rem;
    }
    .block-desc {
        font-weight: 500;
        font-size: 18px;
        line-height: 133%;
        color: var(--grey-600);
        margin-bottom: 16px;
        letter-spacing: -0.005rem;
    }
    .tags {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        .tag {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 14px;
            line-height: 143%;
            padding: 4px 12px;
            border-radius: 100px;
            letter-spacing: -0.005rem;
        }
        & svg:last-child{
            display: none;
        }
    }
    .block-img {
        width: calc(55% - 30px);
        height: auto;
        max-height: 480px;
        display: flex;
        & img {
            width: auto;
            height: auto;
            display: block;
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
        }
    }
    .controls {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 40px;
    }
    @media (max-width: 996px) { 
        padding: 20px 0px;
        .wrapper {
            padding: unset;
            flex-direction: column-reverse;
            gap: 32px;
            padding-top: 60px;
            position: relative;
            .breadcrumbs {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .block-desc {
            font-size: 16px;
        }
        .left-side {
            width: 100%;
            max-width: unset;
        }
    }
    @media (max-width: 768px) { 
        .block-img {
            width: 100%;
        }
    }
    @media (max-width: 498px) { 
        .controls {
            margin-top: 32px;
            flex-direction: column;
            .btn {
                width: 100%;
            }
        }
    }
}