beyer-tile-reference,
.beyer-tile-reference-wrapper {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
  padding-bottom: 141.23711340206185%;

  .beyer-tile-reference {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &:hover {
    &[link] {
      beyer-icon {
        opacity: 1;
      }
    }
  }

  &[link] {
    cursor: pointer;
  }
}

.beyer-tile-reference {
  display: block;

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

  beyer-icon {
    position: absolute;
    right: 30px;
    bottom: 30px;
    opacity: 0;
    z-index: 2;
    .easeInOutSine(opacity, @tile-animation-duration);
  }

  .widget-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 50px;
    padding-left: 30px;
    color: @white;
    z-index: 2;

    hr {
      background: @white;
    }

    > *:not(h3) {
      opacity: 0;
      .easeInOutSine(opacity, @tile-animation-duration);
    }
  }

  &:hover {
    .overlay {
      opacity: .3;
    }

    .widget-container {
      > *:not(h3) {
        opacity: 1;
      }
    }
  }
}

.ecms-active {
  .beyer-tile-reference {
    .overlay {
      display: none;
    }
  }
}