.container{
    width: 100%;
    padding: 60px 0;
}

.container > .row  {
    --w: 1000px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px 0;
    width: var(--w);
    margin:0 calc((100% - var(--w)) / 2);
}

.container > .short-row {
    --w: 600px;
    width: var(--w);
    margin:0 calc((100% - var(--w)) / 2);
}

.container > .row > .column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 50%;
}

.container > .row > .right {
    width: 40%;
}

@media (max-width: 1100px) {
    .container > .row  {
        --w: 800px
    }
}

@media (max-width: 900px) {
    .container > .row  {
        --w: 600px;
    }
}

@media (max-width: 700px){
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
    .container > .row,
    .container >.short-row {
        --w: 100%;
    }
    .container > .row > .column {
        width: 100%;
    }
    
}