* {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

body {
  background-color: #fdfdfd;
  padding: 5px 5px 5px 5px;
  max-width: 1280px;
}

figure {
  margin: 20px;
  padding: 0;
}

.misc-content {
  max-height: 300px; 
  width: auto;
}

.misc-item {
  display: block;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.misc-media-grid {
  display: grid;
  gap: 0px;
  align-items: center;
  justify-items: center;
}

.misc-index {
  list-style-type: none;
}

.work-index {
  list-style-type: none;
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
  grid-gap: 0px;
}

nav > ol {
  list-style-type: none;
}


[class*="col-"] {
    width: 100%; /* if mobile/ < 768 */
    float: left;
    padding: 0;
    /*border: 1px solid red;*/
}

[class*="col-"] img {
    max-width: 100%;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

h1 {
  font-size: 1.1em;
}

h2 {
  font-size: 1.06em;
}

@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .header {
      display: block;
      position: absolute;
      /* z-index: -100; */
    }

    .header a {
      display: inline-block;
    }

    .nav { 
      padding: 1em;
      margin-top:300px; 
      height: 100%;
    }

    .content { 
      margin-top: 150px; 
    }
} 


/* Responsive grid for logo/figure rows on About page */
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 64px;
  align-items: center;
  justify-items: center;
}

.logos-grid figure {
  margin: 0;
}

.logos-grid img {
  max-width: 100%;
  height: auto;
}