/** @format */

.photoGallery {
  margin-top: 3em;
  margin-bottom: 3em;
  &__thumb {
    margin-bottom: 1.5em;
    border-radius: 0.5em;
    overflow: hidden;
    position: relative;
    display: block;
    img {
      border-radius: 0.5em;
      transition: transform 300ms ease-in-out;
    }
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 5em;
      transition: height 300ms ease-in-out;
      background: linear-gradient(0deg, rgba(0, 0, 0, 100) 0%, rgba(0, 0, 0, 0) 100%);
      z-index: 1;
    }
    &:hover {
      .photoGallery__title {
        h4 {
          color: $green;
        }
      }
      &:after {
        height: 5.5em;
      }
      img {
        transform: scale(1.05);
      }
    }
  }
  &__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 0.75em 1em 1em;
    z-index: 10;

    h4 {
      font-size: 1em;
      line-height: 1.1em;
      color: $white;
      margin-bottom: 0;
      transition: color 300ms ease-in-out;
    }
    p {
      font-size: 0.75em;
      color: $white;
      margin-bottom: 0;
    }
  }
}