body {
    margin: 0px;
    padding: 0px;
    margin-top: 5px;
    text-align: center;
    font-family: Arial;
    color: #888888;
    background-color: lightgray;
}

.container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100px auto 50px;
    grid-template-areas: 'headerContainer'
                         'previews'
                         'footerContainer';
    grid-gap: 40px;
    width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

.previews {
    display: grid;
    grid-area: previews;
    grid-template-columns: repeat(8, 180px);
    grid-template-rows: repeat (3, 180px);
    grid-gap: 40px;
    margin-left: auto;
    margin-right: auto;
}

.headerContainer {
    display: grid;
    grid-area: headerContainer;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 100px;
    grid-template-areas: 'navigationLT header navigationRT';
    width: 100%;
    border-bottom: 1px solid black;
}

.header {
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerContainer {
    display: grid;
    grid-area: footerContainer;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px;
    grid-template-areas: 'navigationLB footer navigationRB';
    width: 100%;
    border-top: 1px solid black;
}

.footer {
    grid-area: footer;
    font-size: 10pt;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.navigation {
    font-size: 40pt;
    justify-content: center;
    align-items: center;
    display: flex;    
}

.navigationLT {
    grid-area: navigationLT;
}

.navigationRT {
    grid-area: navigationRT;
}

.navigationLB {
    grid-area: navigationLB;
}

.navigationRB {
    grid-area: navigationRB;
}

img {
    width: 100%;
}

.detailcontainer {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100px auto 50px;
    grid-template-areas: 'headerContainer'
                         'detail'
                         'footerContainer';
    grid-gap: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.detail {
    grid-area: detail;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%    
}

a {
    color: #888888;
    text-decoration: none;
}

.headline {
    font-size: 20pt;
    font-weight: bold;
}

.note {
    font-size: 16pt;
}

@media screen and (max-width: 1800px) {
  .container {
      width: 1280px;
  }
  
  .previews {
      grid-template-columns: repeat(6, 180px);
      grid-template-rows: repeat (4, 180px);
  }

  .detailcontainer {
      width: 1280px;
  }
}

@media screen and (max-width: 1400px) {
  .container {
      width: 840px;
  }
  
  .previews {
      grid-template-columns: repeat(4, 180px);
      grid-template-rows: repeat (6, 180px);
  }

  .detailcontainer {
      width: 840px;
  }
}

@media screen and (max-width: 1000px) {
  .container {
      width: 620px;
  }
  
  .previews {
      grid-template-columns: repeat(3, 180px);
      grid-template-rows: repeat (8, 180px);
  }

  .detailcontainer {
      width: 620px;
  }
}

@media screen and (max-width: 700px) {
  .headerContainer {
      grid-template-columns: 60px auto 60px;
  }
  
  .footerContainer {
      grid-template-columns: 60px auto 60px;
  }

  .container {
      width: 400px;
  }
  
  .previews {
      grid-template-columns: repeat(2, 180px);
      grid-template-rows: repeat (12, 180px);
  }

  .detailcontainer {
      width: 400px;
  }  
}

@media screen and (max-width: 500px) {
  body {
      margin-left: 5px;
      margin-right: 5px;
  }

  .headerContainer {
      grid-template-columns: 55px auto 55px;
  }
  
  .footerContainer {
      grid-template-columns: 55px auto 55px;
  }

  .container {
      grid-gap: 20px;
      width: 350px;
  }
  
  .previews {
      grid-template-columns: repeat(2, 165px);
      grid-template-rows: repeat (12, 165px);
      grid-gap: 20px;
  }

  .detailcontainer {
      grid-gap: 20px;
      width: 350px;
  }
}