body {
  font-family: Avenir, Arial, sans-serif;
}
div#container { 
  display: table; 
  width: 80%;
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.5;
}
div#container img {
  width: 55%;
  height: auto;
  margin-right: -20%;
  margin-left: 20px;
  float: right;
  margin-bottom: 20px;
}
div#leftcol, div#rightcol { display: table-cell; padding: 1em; }
div#leftcol { width: 50%; }
div#rightcol { width: 40%; }
div#rightcol:before { 
  content: " "; 
  float: left; 
  width: 25%;
  padding-top: 102%;
}
div#rightcol p:first-child {
  margin-bottom: 2rem;
}
@media all and (max-width: 800px) {
  div#container { width: 90%; }
}
@media all and (max-width: 600px) {
  div#leftcol, div#rightcol { display: table-row; }
  div#rightcol:before { content: none; }
  div#container img {
    margin-right: 0;
  }
  div#rightcol p:first-child {
  margin-top: 0;
  margin-bottom: 1rem;
}
}