#timeline, #corporate {
   padding: clamp(0.5rem, 3vw, 2rem);
}

h3 {
	margin: 0;
   border-bottom: 1px dotted #888;
}

#corporate {
   background-color: var(--primary-red);
   color: white;
   text-shadow: 1px 1px 1px #333;
}

#corporate .intro {
   display: flex;
   flex-direction: column;
   gap: 1em;
}

#corporate .intro h2 {
   grid-area: corporateIntro;
   color: hsl(160, 90%, 70%);
}

#corporate .intro p {
   grid-area: corporateP;
   max-width: 40em;
}

#corporate .intro img {
   grid-area: corporateImg;
   filter: drop-shadow(0.05em 0.1em 0.1em black);

   border: none;
   text-align: center;
}

@media all and (min-width: 40em) {
   #corporate .intro {
      display: grid;
      justify-content: space-between;
      align-items: center;
      grid-template-areas: 
         "corporateIntro corporateImg"
         "corporateP corporateImg";
   }
}

#boardOfDirectors {
   display: flex;
   flex-direction: column;
   gap: 2em;

   clear: both;
   margin-block: 3em;
}

@media all and (min-width: 30em) {
   #boardOfDirectors {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
   }
}

#boardOfDirectors dl {
   color: #333;
   background-color: white;
   text-shadow: none;
   margin: 0;
   padding: 0.5em 0.5em 0;
}

dt {
   font-size: 1.1rem;
}

dd { 
   margin: 0 0 1em;
}

dd img { 
   display: block;
   margin: 0.2em 0;
}

@media all and (min-width:35em) {
   dd {
      display: grid;
      grid-template-areas: "boardMemberDescr boardMemberImg";
      grid-template-columns: 1fr 150px;
      grid-gap: 0.5em;
   }

   dd > img {
      grid-area: boardMemberImg;
   }

   dd > div {
      grid-area: boardMemberDescr;
   }
}

#contentWrapper, main { 
	margin-bottom: 0; 
	padding-bottom: 0; 
}

.columnized .group { 
   margin: 0 0 2em 1em; 
}

.photo {
  text-align: center;
  padding: 0 1em 1em;
}

@media all and (min-width:55em) { 
   .columnized { 
      column-count: 2;
      column-gap: 2em;
   }
}