@charset "UTF-8";
/* CSS Document */
.grid-container {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
  div {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: coral;
    }
    img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .25s ease-in-out;
    }
    p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }
  }
}
* {
  box-sizing: border-box;
}
.column6 {
  float: left;
  width: 16.65%;
  padding: 2px;
}

.column5 {
  float: left;
  width: 20%;
  padding: 2px;
}

.column4 {
  float: left;
  width: 25%;
  padding: 2px;
}

.column3 {
  float: left;
  width: 33.33%;
  padding: 5px;
}
.column3-lower {
  float: left;
  width: 33.33%;
  padding: 5px;
  margin-top: 40px;
}
.column2 {
  float: left;
  width: 50%; /*    padding: 5px;*/
}
.column1 {
  float: left;
  width: 100%;
  padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}