@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0 - blog-post
 * 2.0 - blog-post__list
 * 3.0 - blog-post__img
 * 4.0 - blog-post__content
	* 4.1 - blog-post__date
	* 4.2 - blog-post__h
	* 4.3 - blog-post__text
	* 4.4 - blog-post__btn
*/


/* 1.0 - blog-post */
.blog-post {
      margin: 10px 0 20px;
      position: relative;
      flex-grow: 1;

      @include media-max(sm) {
            margin: 30px 0;
      }


      /* 2.0 - blog-post__list */
      &__list {
            @include media-min(1200px) {
                  padding: 0 150px;
            }
      }


      /* 3.0 - blog-post__img */
      &__img {
            width: 100%;

            &__link {}
      }


      /* 4.0 - blog-post__content */
      &__content {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
      }


      /* 4.1 - blog-post__date */
      &__date {
            @include absolute(15px, auto, auto, 15px);
            margin: 0;
            line-height: 1;
            background: $primary-color;
            color: #fff;
            padding: 7px 10px;
            font-size: 13px;
            border-radius: 0;
            z-index: 9;
      }


      /* 4.2 - blog-post__h */
      &__h {
            font-family: $header-font-family;
            font-size: 18px;
            margin: 25px 0 15px;

            &__link {
                  color: inherit;
                  @extend %link-color;
            }
      }


      /* 4.3 - blog-post__text */
      &__text {
            flex-grow: 1;
            margin: $paragraph-margin;

            p {
                  margin: 0;
            }
      }


      /* 4.4 - blog-post__btn */
      &__btn {
            .button {}
      }
}