osu-cascades/ecotone-web

@import './constants.css.scss';

.gallery {
    width: auto;
    margin: 0 auto;
    overflow: auto;
    padding: $space2;
  padding-bottom: $space4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tile {
  position: relative;
    margin: $space2;
    border: $grey5;
    border-radius: $space0;
    width: 15.7%;
    min-width: $space10;
    transition-duration: 0.15s;
  background-color: white;
    box-shadow: $shadow1;
}

#plot {
  &:hover {
    box-shadow: $orange-shadow;
  }
  &:active {
        box-shadow: $shadow0;
  }
}

#plant {
  &:hover {
    box-shadow: $green-shadow;
  }
  &:active {
        box-shadow: $shadow0;
  }
}

.tile-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-tile {
  position: relative;
    margin: auto;
    display: block;
    width: 100%;
    height: $space10;
  background-size: cover;
  border-radius: $space0;
  &::after {
    box-shadow: $border-shadow;
    border-radius: $space0;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  &.default img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: $space0;
  }
}

.desc {
    padding: $space1;
    text-align: center;
  height: 160px;
    width: 100%;
  h3 {
    margin-top: $space3;
    margin-bottom: $space1;
    font-weight: 500;
  }
}