body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
  background: linear-gradient(
  -45deg,
  rgba(234, 157, 52, 0.9),
  rgba(0, 0, 0, 0.7),
  rgba(234, 157, 52, 0.9)
);
  background-size: 400% 400%;
  animation: gradient 20s ease-in-out infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1 {
  color: #26233a;
  font-size: 50px;
  padding-bottom: 13px;
}
.grid-container {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
  div {
    margin: 0 1.5rem 1.5rem 0;
    display: block;
    width: 100%;
    border: solid 4px #232136;
    padding: 5px;
    box-shadow: 5px 5px 5px  rgba(234, 157, 52, 0.10);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: #f6c177;
    }
    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;
      color: #f6c177;
    }
  }
}
.grid-container div.hover-sim {
  border-color: #f6c177;
}

.grid-container div.hover-sim img {
  filter: grayscale(0);
}

 @media only screen and (max-width: 600px) {
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
  background: linear-gradient(
  -45deg,
  rgba(234, 157, 52, 0.9),
  rgba(0, 0, 0, 0.7),
  rgba(234, 157, 52, 0.9)
);
  background-size: 400% 400%;
  animation: gradient 20s ease-in-out infinite;
}

  .grid-container {
  columns: 2 130px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
  div {
    margin: 0 1.5rem 1.5rem 0;
    display: block;
    width: 100%;
    border: solid 4px #232136;
    padding: 5px;
    box-shadow: 5px 5px 5px  rgba(234, 157, 52, 0.10);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: #f6c177;
    }
    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;
      color: #f6c177;
    }
  }
}
}