{
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: powderblue;
}

.header {
  font-size: 35px;
  text-align: center;
  max-width: 1000px; 
  margin: 0 auto; /* Centers the header block itself */
  padding: 10px;
}

hr.solid {
  border-top: 3px solid #fff;
}

.grid-container {
  display: grid;
  /* Fixed width for image, flexible for text */
  grid-template-columns: minmax(0, 512px) 1fr; 
  grid-template-areas: 'left middle';
  height: auto;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px; /* Space between your different projects */
  
  gap: 20px;
  padding: 20px;
}

.grid-container.small {
  display: grid-small;
  /* Fixed width for image, flexible for text */
  grid-template-columns: minmax(0, 256px) 400px; 
  /*grid-template-areas: 'left middle';*/
  /*height: auto;*/
  max-width: 750px;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  margin-bottom: 10px; /* Space between your different projects 
  
  gap: 15px;
  padding: 20px;
}

h3, h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

h3 {
  font-size: 20px;
  padding: 0px;
}

h4 {
  font-size: 14px;
  padding: 0px;
}

.left,
.middle,
.right {
  padding: 10px;
}

.left {
  grid-area: left;
  /*width:512px;*/
}
.left img {
  display: block;
  width:100%;
  max-width: 512px;
  height: auto;    /* Maintains aspect ratio */
}
.grid-container.small .left img {
  max-width: 256px; 
}

.middle {
  grid-area: middle;
  min-width: 0;
}

/* Style the right column */
/*.right {*/
/*  grid-area: right;*/
/*}*/

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}