.wrapper{
    overflow: hidden;
}

.hero-section{
    display: grid;
    grid-template-columns: 50% 50%;
    width: 1440px;
    padding: 0px var(--padding);
    margin: 0px auto;
    align-items: center;
}

.hero-section h1{
    font-size: 68px;
    font-weight: 400;
}

.hero-section p{
    font-size: 24px;
    color: #7A7A7A;
    margin-top: 12px;
}

.column{
    position: relative;
}

.column:first-child{
    padding: 80px 80px 80px 0px
}

.wrapper{
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.background{
    display: none;
}

.section_cta{
    display: flex;
    column-gap: 12px;
    align-items: center;
    margin-top: 24px;
}

.image-block{

    --offset-x-desktop: 0px;
    --offset-x-mobile: 0px;
    --offset-x-tablet: 0px;

    --offset-y-desktop: 0px;
    --offset-y-tablet: 0px;
    --offset-y-mobile: 0px;

    --width-desktop: 100%;
    --width-tablet: 100%;
    --width-mobile: 100%;
    --height-desktop: 100%;
    --height-tablet: 100%;
    --height-mobile: 100%;

    width: max-content;
    left: var(--offset-x-desktop);
    top: var(--offset-y-desktop);
    width: var(--width-desktop);
    height: var(--height-desktop);
}

.image-block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1440px){
    .hero-section h1{
        font-size: 56px;
        line-height: 67px;
        letter-spacing: -2.24px;
        max-width: 490px;
    }

    .hero-section p{
        font-size: 18px;
        line-height: 29px;
        max-width: 410px;
    }

    .hero-section{
        width: 100%;
    }

    .column:first-child{
        padding-right: 0px;
    }
}


@media (max-width: 1040px){
    .hero-section{
        padding: 0px 24px;
    }

    .hero-section h1{
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -1.92px;
    }
}

@media (max-width: 960px){
    .hero-section{
        grid-template-columns: 100%;
        row-gap: 24px;
    }

    .hero-section h1{
        max-width: 640px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-section p{
        max-width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .section_cta{
        justify-content: center;
    }

    .image-block{
        left: var(--offset-x-tablet);
        top: var(--offset-y-tablet);
        width: var(--width-tablet);
        height: var(--height-tablet);
    }
}