Growstuff/growstuff

.photo-grid {
  background: $beige;
}
 
// clear fix
Begin pseudo elements with double colons: `::`
.photo-grid:after {
  clear: both;
  content: "";
  display: block;
}
 
.hero-photo {
  max-height: 500px;
}
 
.photo-thumbnail {
  margin-bottom: 1em;
  margin-right: 1em;
  max-width: 150px;
  padding: 0;
  position: relative;
 
  img {
    width: 100%;
  }
 
  .text {
    bottom: 0;
    color: $black;
    display: none;
    margin: 0;
    position: absolute;
    width: 100%;
  }
 
  p {
    color: $white;
    margin: 0;
    padding: 5px;
  }
 
  &:hover {
    .text {
      display: block;
    }
  }
}