@import "mixins/tools.functions";
@import "mixins/tools.mixins";

.o-member-feature__content--online-tools {
  // This makes IE11 behave
  @include grid-template-rows(0, auto auto auto);

  .c-button {
    width: 100%;
    margin: rem(25) 0 0;
    @include grid-row(3, -1);
  }

  .o-member-feature-4columns-link,
  .o-member-feature-4columns-item--no-link {
    @include grid-template-columns(0, rem(42) auto);
  }
}

// modifies the size of the icons
// main styling for .o-member-feature-4columns-item: patterns/stylesheets/_objects.member-feature.scss
.o-member-feature-4columns--online-tools {
  @include grid-row(2, 3);
  .o-member-feature-4columns-item {
    &:nth-of-type(1) {
      .o-member-feature__icon {
        width: rem(38);
        height: rem(38);
      }
    }
    &:nth-of-type(2) {
      .o-member-feature__icon {
        width: rem(41);
        height: rem(33);
      }
    }
    &:nth-of-type(3) {
      .o-member-feature__icon {
        width: rem(40);
        height: rem(40);
      }
    }
    &:nth-of-type(4) {
      .o-member-feature__icon {
        width: rem(42);
        height: rem(42);
      }
    }
  }
}
