*{
    box-sizing: border-box;
}
.wrapper{
    max-width: 700px;
    margin: 0 auto;
}



.wrapper {
    display: grid;
    grid-template-columns: 140px 3fr;
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);
}

.img-box{
    grid-column: 140px;
    grid-row: 1;
}

img {
    max-width: 140px;
    max-height: 160px;
}

.content {
    padding-left: 20px;
    grid-column: 2/4;
    grid-row: 1;
    height: 160px;
}

.footer {
    grid-column: 1/4;
    grid-row: 2;
}
.wrapper > .img-box { grid-area: img; }
.wrapper > .content { grid-area: bd; }
.wrapper > .footer { grid-area: ft; }


@media (min-width: 412px) {

    .wrapper {
        display: grid;
        grid-template-columns: 140px 3fr;
        grid-gap: 5px;
        grid-auto-rows: minmax(100px, auto);

        grid-template-areas:
        "img bd"
        "ft ft";
    }
}

@media (max-width: 411px) {
    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 5px;
        grid-auto-rows: minmax(100px, auto);

        grid-template-areas:
        "bd bd"
        "img ft";
    }

}