.fire > .image {
  background-image: url(/img/gallery/Touched\ by\ fire/fire4.jpg);
}
.sgraffito > .image {
  background-image: url(/img/gallery/Sgraffito/sgraf1.jpg);
}
.crockery > .image {
  background-image: url(/img/gallery/Tiny\ dishes/dish1.jpg);
}
.reef > .image {
  background-image: url(/img/gallery/Reef/reef1.jpg);
}
.rainforest > .image {
  background-image: url(/img/gallery/Rainforest/rain1.jpg);
}
.mugs > .image {
  background-image: url(/img/gallery/Limited\ Edition\ Mugs/mug1.jpg);
}
.shino > .image {
  background-image: url(/img/gallery/Shino/shino1.jpg);
}
.misc > .image {
  background-image: url(/img/gallery/Misc/misc1.jpg);
}

@media only screen and (max-width: 768px) {
  body {
    height: auto;
  }
  .grid-container {
    display: flex;
    width: 100vw;
    flex-direction: column;
  }
  .grid-item {
    width: 100vw;
    height: 60vh;
    position: relative;
    text-align: center;
    margin-bottom: 5px;
    background-color: rgba(0,0,0,0.8);
  }
  .image {
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    width: 100vw;
    height: inherit;
    margin-bottom: 1rem;
    background-position: center;
    background-size: cover;
    opacity: 0.5;
  } 
  .image a {
    opacity: 0;
    height: 100%;
    width: 100%;
    transform: scale(1);
  }
  a.mob-link {
    font-size: 2.5rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
    display: block;
    text-align: center;
    transform: translateY(-68px);
    height: 50px;
  }
}

@media only screen and (min-width: 769px) and (max-width:1530px) {
  body {
    height: auto;
  }
  section.main {
    width: 100%;
  }
  .grid-container-display {
    display: grid;
    grid-template: repeat(4, 360px) / repeat(2, 360px);
    gap: 1rem;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center;
  }
  .grid-item {
    position: relative;
    text-align: center;
  }
  .image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 360px;
    width: 360px;
    background-position: center;
    background-size:cover;
    transition: 0.5s;
  }
  .image a {
    font-size: 2rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
    opacity: 0;
    transform: scale(0);
    transition: 0.8s;
    text-decoration: none;
  }
  .image:hover {
    box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.6) inset;
  }
  .image:hover a {
    opacity: 1;
    transform: scale(1);
  }
  .container-bottom {
    flex-direction: column;
    height: 10vh;
  }
  a.mob-link {
    display: none;
  }
}

/* Big Window */
@media only screen and (min-width: 1531px) {
  body {
    height: auto;
  }
  section.main {
    width: 100%;
  }
  .grid-container-display {
    display: grid;
    grid-template: repeat(2, 360px) / repeat(4, 360px);
    gap: 1rem;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center;
  }
  .grid-item {
    position: relative;
    text-align: center;
  }
  .image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 360px;
    width: 360px;
    background-position: center;
    background-size:cover;
    transition: 0.5s;
  }
  .image a {
    font-size: 2rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
    opacity: 0;
    transform: scale(0);
    transition: 0.8s;
    text-decoration: none;
  }
  .image:hover {
    box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.6) inset;
  }
  .image:hover a {
    opacity: 1;
    transform: scale(1);
  }
  .container-bottom {
    flex-direction: column;
    height: 6vh;
  }
  a.mob-link {
    display: none;
  }
}