.heading {

  h2 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
  }

  p {
    color: #565656;
    font-size: 1.7rem;
    margin-bottom: 5rem;
  }
}

.btn {

  &__blog {
    background: #fdaf67;
    border-radius: .4rem;
    color: #fff;
    padding: 1rem 2rem;
    margin-top: 1rem;

    &:hover {
      background: #333;
      color: #fff;
    }
  }
}

.blog {

  &__item {
    &:hover .blog__box-content {
      border-color: #fdaf67;
    }
  }

  &__box-bg {
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
    height: 20rem;
    border: 1px solid #fdaf67;
    border-bottom: 0rem solid;

    &--1 {
      background-image: url(../../img/blog-01.jpg);
    }
    &--2 {
      background-image: url(../../img/blog-02.jpg);
    }
    &--3 {
      background-image: url(../../img/blog-03.jpg);
    }


  }

  &__box-content {
    border: 1px solid #f4f4f4;
    padding: 2rem;
    transition: all .3s;

    h3 {
      color: #222;
      font-size: 2rem;
      margin: 1.5rem 0rem 1rem 0rem;
    }

    p {
      font-size: 1.6rem;
    }
  }

  &__meta {
    font-size: 1.4rem;

    a {
      color: #565656;
    }

    i {
      color: #fdaf67;
    }
  }

}


////////////////////////////////////////////////////
// HTML
/*
  <section class="blog" id="blog">
    <div class="content-box-md">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <div class="heading">
              <h2>Latest News</h2>
              <p>Sit amet consectetur adipisicing elit. Molestiae ea repudiandae dignissimos.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="blog__item">
              <div class="blog__box-bg blog__box-bg--1"></div>
              <div class="blog__box-content">
                <div class="blog__meta d-flex justify-content-between">
                  <span><a href="#"><i class="icofont-users"></i> Lamia Qurishy</a></span>
                  <span><i class="icofont-ui-calendar"></i> 15 August 2018</span>
                </div>
                <h3>A short guide to talking About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, mollitia?</p>
                <a href="#" class="btn btn__blog">read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="blog__item">
              <div class="blog__box-bg blog__box-bg--2"></div>
              <div class="blog__box-content">
                <div class="blog__meta d-flex justify-content-between">
                  <span><a href="#"><i class="icofont-users"></i> Lamia Qurishy</a></span>
                  <span><i class="icofont-ui-calendar"></i> 15 August 2018</span>
                </div>
                <h3>A short guide to talking About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, mollitia?</p>
                <a href="#" class="btn btn__blog">read more</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="blog__item">
              <div class="blog__box-bg blog__box-bg--3"></div>
              <div class="blog__box-content">
                <div class="blog__meta d-flex justify-content-between">
                  <span><a href="#"><i class="icofont-users"></i> Lamia Qurishy</a></span>
                  <span><i class="icofont-ui-calendar"></i> 15 August 2018</span>
                </div>
                <h3>A short guide to talking About</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, mollitia?</p>
                <a href="#" class="btn btn__blog">read more</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
*/