tningjs/sam-and-his-friends

///
/// Future Imperfect by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///

/* Intro */

#intro {
  .logo {
    border-bottom: 0;
    display: inline-block;
    margin: 0 0 (_size(element-margin) * 0.5) 0;
    overflow: hidden;
    position: relative;
    width: 4em;

    &:before {
      background-image: svg-url(
        '<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none" zoomAndPan="disable"><polygon points="0,0 100,0 100,25 50,0 0,25" style="fill:#{_palette(bg-alt)}" /><polygon points="0,100 100,100 100,75 50,100 0,75"  style="fill:#{_palette(bg-alt)}" /></svg>'
      );
      background-position: top left;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      content: '';
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    img {
      display: block;
      margin-left: -0.25em;
      width: 4.5em;
    }
  }

  header {
    h2 {
      font-size: 2em;
      font-weight: _font(weight-heading-extrabold);
    }

    p {
      font-size: 0.8em;
    }
  }

  @include breakpoint('<=large') {
    margin: 0 0 _size(section-spacing) 0;
    text-align: center;

    header {
      h2 {
        font-size: 2em;
      }

      p {
        font-size: 0.7em;
      }
    }
  }

  @include breakpoint('<=small') {
    margin: 0 0 _size(section-spacing-small) 0;
    padding: 1.25em 0;

    > :last-child {
      margin-bottom: 0;
    }

    .logo {
      margin: 0 0 (_size(element-margin) * 0.25) 0;
    }

    header {
      h2 {
        font-size: 1.25em;
      }

      > :last-child {
        margin-bottom: 0;
      }
    }
  }
}