@tile--image-size--hover: 1.03;

.tile-animated {
  cursor: pointer;
  position: relative;
  overflow: hidden;

  picture-component {
    picture {
      img {
        transform: scale(1);
        .easeInOutSine(transform, @tile-animation-duration);
      }
    }
  }

  .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    .easeInOutSine(opacity, @tile-animation-duration);
  }

  .text {
    position: absolute;
    left: 20px;
    top: ~"calc(100% - 50px)";
    .easeInOutSine(top, @tile-animation-duration);

    h4 {
      margin-bottom: 12px;
      .easeInOutSine(color, @tile-animation-duration);
    }

    hr {
      margin-top: 0;
      margin-bottom: 6px;
    }

    p {
      line-height: 1.1em;
      opacity: 0;
      .easeInOutSine(opacity, @tile-animation-duration);
    }
  }

  &:hover {

    picture-component {
      picture {
        img {
          transform: scale(@tile--image-size--hover);
        }
      }
    }

    .overlay {
      opacity: .3;
    }

    .text {
      top: ~"calc(100% - 100px)";

      h4 {
        color: @champagne-25;
      }

      p {
        opacity: 1;
      }
    }
  }
}