style.css

* {
    box-sizing: border-box;
    font-family:"Tahoma";
}
img {
    display:table;
    margin:0 auto;
    max-width:100%;
    height:auto;
    object-fit: contain;
    width:584px;
    height:438px;
}
.container {
    display: table;
    width:100%;
    border:2px dashed #ccc;
    padding:0 5px 5px 5px;
}
.wide, .left-wide, .left-narrow,
.right-wide, .right-narrow, .one-third {
    border:2px dashed #ccc;
    padding:5px;
    margin-top:5px;
    float:left;
    text-align: justify;
    min-height:194px;
    display:table;
}
.left-wide, .left-narrow, .right-wide, .right-narrow {
    min-height:452px;
}
.wide { width:100%; }
.left-wide { width:calc(100% / 3 * 2 - 5px); margin-right:5px; }
.right-wide { width:calc(100% / 3 * 2); margin-left:5px; }
.left-narrow { width:calc(100% / 3 - 5px); }
.right-narrow { width:calc(100% / 3); }
.one-third { width:calc(100% / 3 - 5px); margin-left:5px; }
.first-third { margin-left:0; }
.last-third { width:calc(100% / 3); }