Team members

team_members.scss

//--------------
//---- TEAM ----
//--------------
ul.team {
  @include span-columns($total-columns);
  padding: 0 !important;
  li {
    list-style: none;
    @include span-columns($total-columns);
    border-bottom: 1px solid $grey;
    padding: 0;

    .inner {
      padding: rhythm(0.5) 0 rhythm(0.25);
      img {
        float: left;
        @include span-columns(1,$total-columns);
        margin: 0 rhythm(0.25) 0 rhythm(0.1);
      }

      .txt {
        @include span-columns(3 omega,$total-columns);
        h2 {
          width: 100%;
          @include adjust-font-size-to(18px);
          font-weight: bold;
          margin-bottom: 0;
        }
        h3 {
          width: 100%;
          @include adjust-font-size-to(14px);
          margin: 0;
        }
        p {
          width: 100%;
          margin: rhythm(0.1) 0;

        }
      }      
    }  
  }
}

@include at-breakpoint($break-1) {
  //team
  ul.team {
    @include span-columns($total-columns);
    li {
      list-style: none;
      border-top: none;
      @include span-columns($total-columns);
      .inner {
        img {
          @include span-columns(2,$total-columns);
          margin-left: 0;
        }
        .txt {
          @include span-columns(4 omega,$total-columns);
        }      
      }  
    }
  }
}

//-------------------
//-- BREAK 2 --------
//-------------------
@include at-breakpoint($break-2) {
  //team
  ul.team {
    width: 100%;
    li {
      list-style: none;
      width: 50%;
      margin-right: 0;
      .inner {
        img {
          width: 25%;
          float: left;
          margin-left: 0;
        }
        .txt {
          width: 67%;
          float: left;
          margin-right: 0;
          h2 { @include adjust-font-size-to(15px); }
        }      
      }
      &.first {
        border-bottom: 1px solid $grey;
      }
    }
  }
}

//-------------------
//-- BREAK 3 --------
//-------------------
@include at-breakpoint($break-3) {
  //team
  ul.team {
    width: 100%;
    li {
      list-style: none;
      width: 50%;
      margin-right: 0;
      .inner {
        img {
          width: 25%;
          float: left;
          margin-left: 0;
        }
        .txt {
          width: 67%;
          float: left;
          margin-right: 0;
          h2 { @include adjust-font-size-to(15px); }
        }      
      }  
    }
  }
}