.header {
    overflow: hidden;
    background-color: #333;
    padding: 0px 0px;
  }
  
  .header a.logo {
    float: left;
    margin-top: 7px;
  }
  
  .header ul {
    list-style-type: none;
    margin-left: 40%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  .header li {
    float: left;
  }
  
  .header li a {
    display: block;
    color: whitesmoke;
    font-size: 16px;
    text-align: center;
    padding: 18px 16px;
    text-decoration: none;
  }
  
  .header li a:hover {
    background-color: #111;
  }
  
  .active {
    background-color: #3E3E3E;
  }
  
  .grid-item-container {
    display: block;
    padding: 1rem;
    background-color: whitesmoke;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  
  .grid-item {
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
    font-size: 15px;
    text-align: center;
  }
  
  @media (min-width:768px) {
      .grid-item-container {
          display: grid;
          grid-auto-rows: 1fr;
          grid-template-columns: 1fr 1fr 1fr;
      }
  }
  
  .grid-item-image {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  .article {
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    background-color: whitesmoke;
  }
  
  .article ul {
     margin-top: 0px;
     margin-bottom: 15px;
  }    
  
  .article li {
     display: block;
     margin-top: 0px;
     margin-bottom: 15px;
     width: 95%;
     text-align: center;
     padding: 2px;
     color: orangered;
     background-color: whitesmoke;
  }    
  
  .article picture {
     float:left;
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: 5px;
     margin-right: 20px;
     text-align: left;
  }    
  
  .responsive {
    width: 40%;
    max-width: 400px;
    height: auto;
  }
  
  figure {
    border: 1px #FFFFFF solid;
    padding: 10px;
    margin: auto;
  }
  
  figcaption {
    background-color: white;
    color: black;
    font-style: italic;
    padding: 2px;
    text-align: start;
  }
  figcaption p {
    color: gray;
    font-style: normal ;
  }
  
  footer {
    display: block;
    text-align: center;
    padding: 2px;
    color: white;
  }
  
  footer p {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    text-decoration: none;
  }