<h1>Grid Test </h1>
<div class="container">
  <div class="col column1">
    <h2>Column 1 A</h2>
    <p><img class="main-img" src="https://picsum.photos/id/1015/500/600" width="500" height="600" alt="river"></p>
  </div>
 <div class="col column2">
    <h2>Column 2 A</h2>
    <p>Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content </p>
    <p>Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content </p>
    <p>Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content Column 2 content </p>
  </div>
  <div class="col column3">
    <h2>Column3 A</h2>
    <p>Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content Column 3 content </p>
  </div>
  <hr class="divider">
  <div class="col col1-row2">
    <h2>Footer 1 </h2>
  </div>
  <div class="col col2-row2">
    <h2>Footer 2</h2>

  </div>
  <div class="col col3-row2">
    <h2>Footer 3</h2>
  </div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background:#333;
}
h1 {
  text-align: center;
  color:#fff;
}
h2{margin:0 0 1rem;}
.container {
  display: grid;
  width: 100%;
  grid-template-areas: 
    "side1  main1 rside1" 
    "divider  divider divider"
    "side2  main2 rside2";
  grid-template-rows: auto;
  grid-template-columns: 25% 2fr 2fr;
  gap: 1rem;
  margin-bottom: 1rem;
  max-width: 1480px;
  margin: auto;
  background:#f9f9f9;
  border:3px solid #000;
  padding:1rem;
}
.col {
  padding: 1rem;
}
.col + .col:not(.column2){
  border-left:2px solid #000;
}
.column1
  grid-area: side1;
}
.column2{
  grid-area: main1;
}
.column3{
  grid-area: rside1;
}
.col1-row2 {
  grid-area: side2;
}
.col2-row2 {
  grid-area: main2;
}
.col3-row2 {
  grid-area: rside2;
}
.divider{
  grid-area: divider;
  border:none;
  margin:0 1rem;
  height:2px;
  background:#000;
}
.main-img{
  width:100%;
  height:auto;
  max-width:380px;
  min-width:100px;
}

/* just for fun */
  .column1{background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,43,121,1) 58%, rgba(0,212,255,1) 100%);text-align:center;}
 .column1 h2{color:#fff;}
/*   */

@media screen and (max-width: 880px) {
  .container{display:block;}
  .container .col + .col{border-left:none;}
  .main-img{ 
    max-width:320px;
    margin:auto;
    display:block;
    box-shadow:0 0 10px 10px rgba(0,0,0,0.5);
  }
  .column1{text-align:center;}
  .col1-row2 h2,
  .col2-row2 h2, 
  .col3-row2 h2{margin:0;}
  
  .col1-row2,
  .col2-row2, 
  .col3-row2 {border-bottom:1px dotted #ccc;}
}