.elem-container {
    display: grid;
    grid-template-columns: repeat(4,0.5fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: center;
}

.elem_right img, .elem_left img{
    width: 400px;
    height: 300px;

}
.elem_right {
    display: grid;
    grid-template-rows: repeat(1,20px);
    grid-column-start: 3;
    grid-column-end: 4;
    width: 400px;
    height: 300px
}
.elem_right span,.elem_left span {
    background-color: #0e3c7b;
    width:400px;
    text-align: center;
    grid-row-start: 1;
    grid-row-end: 1;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;

}


.elem_left {
    display: grid;
    grid-template-rows: repeat(1,20px);
    grid-column-start: 2;
    grid-column-end: 3;
    width: 400px;
    height: 300px
}

@media (max-width: 768px) {
    .elem_left {
        width: 150px;
        height: 150px;
        grid-column-start: 1;
        grid-column-end: 1;

    }
    .elem_right {
        width: 150px;
        height: 150px;
        grid-column-start: 2;
        grid-column-end: 2;

    }
    .elem_right img, .elem_left img{
        width: 150px;
        height: 150px;

    }
    .elem_right span,.elem_left span {
        width:150px;


    }
    .elem-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        justify-content: center;
    }
}