.join-block {
    .wrapper {
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        padding: 60px 63px 0px 63px;
        max-width: 1216px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .main-title {
        color: var(--white);
        z-index: 2;
        & br {
            display: none;
        }
    }
    .block-desc {
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        text-align: center;
        color: var(--white);
        margin-bottom: 32px;
        position: relative;
        z-index: 2;
        letter-spacing: -0.05rem;
    }
    .btn {
        margin-bottom: 66px;
    }
    .block-img {
        width: 100%;
        height: auto;
        max-height: 420px;
        display: flex;
        z-index: 2;
        position: relative;
    }
    .block-img img {
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
    }
    .block-img.mobile-img {
        display: none;
    }
    .block-bg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        display: flex;
        z-index: 1;
        & img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center;
        }
    }
    .block-bg.mobile-bg {
        display: none;
    }
    @media (max-width: 1200px) { 
        h2.main-title {
            text-align: left;
            justify-content: flex-start;
        }
        .wrapper {
            padding: 40px 20px 0px 20px;
        }
        .block-desc {
            font-size: 16px;
        }
        .btn {
            margin-bottom:32px;
        }
        .wrapper {
            align-items: flex-start;
        }
    }
    
    @media (max-width: 768px) { 
        .block-desc {
            text-align: left;
        }
        .btn {
            width: 100%;
        }
    }
    @media (max-width: 600px) { 
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        .main-title {
            position: relative;
            line-height: 140%;
            margin-bottom: 22px;
            br {
                display: block;
            }
            & span {
                position: absolute;
                bottom: 2px;
                left: 30px;
                width: 185px;
                height: 30px;
            }
        } 
        .block-img:not(.mobile-img) {
            display: none;
        }
        .block-img.mobile-img {
            display: flex;
        }
        .block-bg:not(.mobile-bg) {
            display: none;
        }
        .block-bg.mobile-bg {
            display: flex;
        }
    }
    @media (max-width: 498px) { 
        .wrapper {
            background-position: -250px;
        }
    }
}