@import "tools.mixins";

@mixin o-member-feature-promo-grid-tier($group) {
  // round first param down to 2 decimal places
  $cell: ux-round($group / 3, 2, floor);

  .o-member-feature-promo-grid__inner {
    @include grid-template-columns(0, 1fr $group 1fr);
    @include grid-template-rows(0, $cell auto);
  }

  .o-member-feature-promo-grid__cell {
    flex-basis: $cell;
    height: $cell;
  }
}

@mixin o-member-feature-promo-grid-sm {
  @include o-member-feature-promo-grid-tier(rem(700));

  .o-member-feature-promo-grid__cell__title {
    padding: 0 rem(10) rem(10);
    font-size: rem(24);
    line-height: line-height(24, 24);
  }

  .o-member-feature-promo-grid__cell__desc {
    padding: 0 rem(10) rem(10);
    font-size: rem(14);
    line-height: line-height(14, 18);
  }

  .o-member-feature-promo-grid {
    display: block;
  }
}

@mixin o-member-feature-promo-grid-md {
  @include o-member-feature-promo-grid-tier(rem(940));

  .o-member-feature-promo-grid__cell__title {
    padding: 0 rem(20) rem(10);
    font-size: rem(32);
    line-height: line-height(32, 30);
  }

  .o-member-feature-promo-grid__cell__desc {
    padding: 0 rem(20) rem(20);
    font-size: rem(16);
    line-height: line-height(16, 20);
  }
}

@mixin o-member-feature-promo-grid-lg {
  @include o-member-feature-promo-grid-tier(rem(1260));

  .o-member-feature-promo-grid__cell__title {
    padding: 0 rem(20) rem(20);
    font-size: rem(44);
    line-height: line-height(44, 40);
  }

  .o-member-feature-promo-grid__cell__desc {
    padding: 0 rem(20) rem(20);
    font-size: rem(20);
    line-height: line-height(20, 23);
  }
}

@mixin o-member-feature-promo-scroll-sm {
  .o-member-feature-promo-scroll {
    display: block;
  }
}
