image-gallery {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-flow: row dense;
}

image-gallery-thumbnail {
  display: block;
  height: 150px;
  align-self: stretch;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

@media screen and (min-width: 1280px) {
  image-gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  image-gallery-thumbnail {
    height: 250px;
  }
}

image-gallery-thumbnail a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

image-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (prefers-reduced-motion: no-preference) {
  image-gallery-thumbnail {
    position: relative;
    top: 0;
    left: 0;
  }


  image-gallery-thumbnail:before {
    content: '';
    border: 1px solid white;

    pointer-events: none;
    position: absolute;
    top: 0rem;
    right: 0rem;
    bottom:0rem;
    left: 0rem;
    transition: top 0.2s, left 0.2s, right 0.2s, bottom 0.2s;
    z-index: 10;
  }

  image-gallery-thumbnail:hover:before {
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    left: .5rem;
  }

  image-gallery-thumbnail:after,
  image-gallery-thumbnail a:before,
  image-gallery-thumbnail:hover a:after {
    transition: top 0.2s ease-in-out;
  }

  image-gallery-thumbnail:after {
    content: '';
    width: 0;
    height: 0;
    border-top: .75rem solid transparent;
    border-left: .75rem solid transparent;
    border-right: .75rem solid transparent;
    border-bottom: .75rem solid #fff;

    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  image-gallery-thumbnail:hover:after {
    top: 50%;
  }

  image-gallery-thumbnail img {
    transition: transform 0.2s ease-in-out;
  }

  image-gallery-thumbnail a:after {
    content: '';
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  image-gallery-thumbnail:hover a:after {
    top: 0%;
  }

  image-gallery-thumbnail a:before {
    content: 'open';
    color: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 1rem);
    z-index: 3;

    font-family: system-ui,
             -apple-system, BlinkMacSystemFont,
             "Segoe UI",
             "Roboto",
             "Oxygen",
             "Ubuntu",
             "Cantarell",
             "Fira Sans",
             "Droid Sans",
             "Helvetica Neue",
             Arial, sans-serif;
    font-size: 0.75rem;
  }

  image-gallery-thumbnail:hover a:before {
    top: 50%;
  }

  image-gallery-thumbnail:hover img {
    transform: scale(1.1);
  }
}