html, body
{
    background-color:rgb(31, 111, 190);
}
.box-parent
{
    position:relative;
    z-index:1;
    width:100%;
    font-size:20pt;
    font-weight:bold;
}
.box-parent > .row
{
    min-height:100vh;

    display: flex;
    flex-direction: row;
}
.row > .col-sm-3, .row > .col-sm-4, .row > .col-sm-6
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.box1
{
    background-color:white;
}
.box2
{
    text-align:center;
    background: rgb(255,255,255);
    background: linear-gradient(107deg, rgba(255,255,255,1) 49%, rgba(31, 111, 190, 1) 51%);
}
.box3
{
    color:white;
    background-color:rgb(31, 111, 190);
}

@media (max-width: 767px)
{
    .box-parent > .row
    {
        display:block;
    }
    .box1
    {
        padding-top:40%;
    }
    .box2
    {
        background: linear-gradient(186deg, rgba(255,255,255,1) 49%, rgba(31, 111, 190, 1) 51%);
    }
}