*, *:before, *:after {box-sizing: border-box;}

body {padding: 2rem;}
main {max-width: 50%; margin: 0 auto;}
section {background:white; margin: 1rem 0;}

@supports (display: grid)
{ main {max-width: none; margin: 0;}
  section {margin: 0;}
  main {display: grid; grid-template-columns:1fr 1fr; grid-gap: 1rem;}
}
main {font-family:Tahoma,Verdana; font-size:12pt; color:black; background:#F0F8FF; margin:0; padding:0;}

section {display: flex; flex-flow: column;}
section > img {order: -1; align-self: center;}
section { padding: 2rem;}
section > h1 {margin: 1rem 1rem 0;}
section > ul {margin: 0 0 1rem;}
section > p {margin: 0.25em 1rem 1rem;}
section {border: 1px solid black; border-radius: 1rem;}

.row {display: flex; flex-direction: row; width: auto;}
.col {display: flex; flex-direction: column; flex: 1;}

.grid-container {display: grid; grid-template-columns: auto auto;}
.grid-item {height:auto;} //Whatever you want them to be

/* container */
.responsive-two-column-grid {display:block;}

/* columns */
.responsive-two-column-grid > * {padding:1rem;}

/* tablet breakpoint */
@media (min-width:768px) {.responsive-two-column-grid {display: grid; grid-template-columns: 1fr 1fr;}}