@import "../../sass/variables";

/* Full-width layout styles */

.full-width {

  .excerpt {

    &.even {

      .featured-image,
      .featured-video {
        right: 0;
      }
    }
  }
  .featured-image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
  }
  // need specificity for override
  #main .excerpt-container {
    width: 100%;
  }
  &.full-post {

    .excerpt-content {
      text-align: left;
    }
  }
}
/* 700px */
@media all and (min-width: 43.75em){

  .full-width {

    .excerpt-container {
      padding: 0 11.11%;
    }
    &.full-post {

      .excerpt-header,
      .excerpt-meta {
        position: relative;
        left: -25%;
        width: 150%;
        padding-left: 8.35%;
        padding-right: 8.35%;
      }
    }
  }
}
/* 900px */
@media all and (min-width: 56.25em){

  .full-width {

    .excerpt-container {
      padding: 0 16.66%;
    }
    .excerpt {
      margin-bottom: $baseline-height * 2;
      opacity: 1;
    }
    .excerpt-header {

      h1 {
        font-size: 2.625em; /* 42px / 16px */
        line-height: 1.143;
      }
    }
    .excerpt-meta {
      padding-top: $baseline-height / 0.813;
    }
    &.full-post {

      .excerpt-header {

        h1 {
          font-size: 4.25em;
          line-height: 1.06;
        }
      }
      .excerpt-meta {
        font-size: 1em;
        line-height: 1.5;
        padding-top: $baseline-height * 2;
        letter-spacing: 0.08em;
      }
    }
  }
}

/* 1100px */
@media all and (min-width: 68.75em){

  .full-width {

    .excerpt-container {
      padding: 0 19.435%;
    }
    &.full-post {

      .excerpt-header,
      .excerpt-meta {
        left: -31.8%;
        width: 163.6%;
        padding-left: 18.175%;
        padding-right: 18.175%;
      }
    }

  }
}

/* 1200px */
@media all and (min-width: 75em){

  .full-width {

    .excerpt-container {
      padding: 0 22.22%;
    }
    &.full-post {

      .excerpt-header,
      .excerpt-meta {
        left: -40%;
        width: 180%;
        padding-left: 18.175%;
        padding-right: 18.175%;
      }
    }
  }
}