* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
          grid-column: 1 / 4;
          grid-row: 1;
          background: white;
}

.nav {
      grid-column: 1 / 4;
      grid-row: 2;
      padding-bottom: 20px;
      background: #F4F4F4;
      padding-top: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}


.column img {
    margin-top: 8px;
    vertical-align: middle;
}

.container {
   display: grid;
   grid-gap: 10px;
   grid-template-columns: 1fr;
 }

ul {list-style-type: none;
   margin: 0;
   padding: 0;
   }

li {
    display: inline;
}

a:link, a:visited {
     color: #373737;
     padding: 14px 25px;
     text-align: center;
     text-decoration: none;
   }

a:hover, a:active {
   background-color: #373737;
   color: #A167A5;
   text-decoration: none;
   }

body {
      background: #F4F4F4;
      color: #F4F4F4;
      font-family: 'Poppins';
      max-width: auto;
      margin: 40px;
}

h2 {color: #373737;
    text-align: center;
    font-size: 50px;
    }
h4 {
    text-align: center;
    font-size: 20px;
    color: #373737;}

      }
.column img {
  transform: scale(1);
  transition: transform 1s, box-shadow 1s;
  box-shadow: 0 0 0 transparent;
}

.column img:hover {
  transform: scale(1.2);
  transition: transform 1s, box-shadow 1s;
  box-shadow: 2px 2px 5px #373737;

}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
    li {
        display: grid;
    }
}