@import "tools.mixins";

@mixin member-feature-sm {
  .o-member-feature__label,
  .o-member-feature__content {
    @include grid-template-columns(0, 1fr rem(700) 1fr);
  }
  .o-member-feature__content {
    padding-top: rem(40);
    padding-bottom: rem(40);
  }
  .o-member-feature__title {
    margin: 0 0 rem(40);
    font-size: rem(46);
    text-align: center;
  }

  // 4 column content
  .o-member-feature-4columns {
    @include display-grid;
    @include grid-template-columns(0, 1fr 1fr 1fr 1fr);
  }

  // 4 column content items
  .o-member-feature-4columns-item {
    border-left: 1px solid rgba($color-white, .45);
    border-top: none;
    padding: 0 rem(10);
    // Unfortunately we have to tell each grid child where in the grid it belongs
    // because IE11 is dumb
    &:nth-of-type(1) {
      padding-left: 0;
      border-left: none;
      @include grid-column(1, 2);
    }
    &:nth-of-type(2) {
      @include grid-column(2, 3);
    }
    &:nth-of-type(3) {
      @include grid-column(3, 4);
    }
    &:nth-of-type(4) {
      padding-right: 0;
      @include grid-column(4, 5);
    }
  }
  .o-member-feature__icon {
    @include grid-column(1, 2);
    @include grid-row(1, 2);
    @include grid-align-self(end);
  }

  .o-member-feature-4columns-item__content-container {
    @include grid-column(1, 2);
    @include grid-row(2, 4);
  }

  .o-member-feature-4columns-item__title {
    margin: rem(20) 0 rem(10);
  }

  .o-member-feature-4columns-item__text {
    margin: 0;
  }
}

@mixin member-feature-md {
  .o-member-feature__label,
  .o-member-feature__content {
    @include grid-template-columns(0, 1fr rem(940) 1fr);
  }
}

@mixin member-feature-lg {
  .o-member-feature__label,
  .o-member-feature__content {
    @include grid-template-columns(0, 1fr rem(1260) 1fr);
  }
}

@mixin member-feature-content-sm {
  padding: rem(40) 0;
  .o-member-feature__title {
    margin: 0 0 rem(40);
    font-size: rem(46);
    line-height: line-height(46, 46);
  }
}
