BEM Image-Top Box - 1

BEM Image-Top Box - 1

<!-- begin Image-Top Box -->
<div class="image-top-box">
  <div class="image-top-box__picture">
    <a href="#" class="image-top-box__picture-link">
      <img src="http://via.placeholder.com/700x500/4F84DB/FFFFFF" alt="" class="image-top-box__image"> </a>
  </div>
  <div class="image-top-box__info">
    <div class="image-top-box__header">
      <h3 class="image-top-box__header-title">
        <a href="#" class="image-top-box__header-title-link">Awesome header here. Knock Knock. Is anyone here?</a>
      </h3>
    </div>
    <div class="image-top-box__descr">
      <p class="image-top-box__descr-p">Awesome description here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sapiente corrupti amet facere dolore, ea adipisci et. Ad officiis modi expedita similique, ullam architecto reiciendis. Consectetur, recusandae nesciunt vitae laudantium!</p>
    </div>
    <div class="image-top-box__buttons">
      <a href="#" type="button" class="image-top-box__btn">READ MORE</a>
    </div>
  </div>
</div>
<!-- end Image-Top Box -->



/* -------------------------------------------------------------------------
   begin Image-Top Box
 * ------------------------------------------------------------------------- */

.image-top-box {
  background-color: #fff;
  .image-top-box__picture {}
  .image-top-box__picture-link {
    display: block;
  }
  .image-top-box__image {
    display: block;
    height: auto;
    width: 100%;
  }
  .image-top-box__info {
    padding: 30px 0 70px;
    position: relative;
  }
  .image-top-box__header {
    margin-bottom: 15px;
    padding: 0 30px;
  }
  .image-top-box__header-title {}
  .image-top-box__header-title-link {
    display: block;
  }
  .image-top-box__descr {
    min-height: 200px;
    padding: 0 30px;
  }
  .image-top-box__buttons {
    bottom: 30px;
    left: 30px;
    position: absolute;
  }
  .image-top-box__btn {}
}


/* -------------------------------------------------------------------------
   end Image-Top Box
 * ------------------------------------------------------------------------- */
 
 
 
 /* begin Media Max-Width 767
============================================================================ */

@media screen and (max-width:767px) {
 /* -------------------------------------------------------------------------
   begin Image-Top Box
 * ------------------------------------------------------------------------- */
  .image-top-box {
    .image-top-box__descr {
      min-height: 0;
    }
  }
  /* -------------------------------------------------------------------------
   end Image-Top Box
 * ------------------------------------------------------------------------- */
}

/* end Media Max-Width 767
============================================================================ */