components/_media

// Media
//
// Media used on the site
//
// Markup:
//    <div class="media {{modifier_class}}">
//      <div class="bg" style="background-image: url('../images//galeria1.png')"
//      data-image="/images//galeria1.png"></div>
//      <div class="overlay">
//        <div class="overlay-content">
//          <i class="fa fa-video-camera" aria-hidden="true"></i>
//        </div>
//      </div>
//    </div>
//
// .media-video  - Media Video.
// .media-image  - Media Image.
//
// Styleguide Components.media
//


.media{
  margin-bottom: 12px;
  position: relative;
  cursor:pointer;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;

  .overlay{
    position: absolute;
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: table;

    .overlay-content{
      display: table-cell;
      vertical-align: middle;
      color: #fff;
      text-align: center;
      font-size: 48px;
    }
  }

  &:hover{
    .overlay{
      display: none;
    }
  }

  .bg{
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  &.media-double{
    height: 220px;
    @media (min-width: $screen-md-min) {
      height: 452px;
      max-width: 800px;
    }

  }

  &.media-single{
    height: 220px;
  }


}