$gallery-height: 80vh;
$tile-size: $gallery-height / 3;


#hero-gallery {
  height: $gallery-height;
  margin: ((100vh - $gallery-height) / 2) auto;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($tile-size, 1fr));
  grid-template-rows: repeat(3, 1fr);
  gap: 0;

  overflow: hidden;
}

.tile {
  //animation: carousel ease-out 10s infinite;
  width: auto;
  height: $tile-size;

  background-size: cover;
  background-position: center;

  a {
    @include transition;

    height: 100%;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    color: white;
    background: #000;

    &:hover {
      opacity: 1;
    }
  }
}