@import 'variables';
@import 'mixins';

.postImageTitle {
  transition: 0.1s ease-out;
  font-size: $font-size-h3;
  font-family: $font-family-headings;
  line-height: $line-height-headings;
  font-weight: $font-weight-headings;
  font-style: normal;
  text-align: left;
  letter-spacing: -0.02em;
  margin: 0;
  position: absolute;
  top: 10%;
  padding: $spacer / 3 $spacer;
  background: rgba($link-color, 0.85);
  color: #fff;
  text-shadow: 0 1px 0 #000;
  left: 0;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}

.postImage {
  @include breakoutviewport();

  max-width: none;
  display: block;
  margin-top: $spacer * 1.5;
  margin-bottom: $spacer * 1.5;

  a & {
    position: relative;
    display: block;
  }

  a:hover & {
    .postImageTitle {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}