@use '../../compiled/tokens/scss/breakpoint';
@use '../../compiled/tokens/scss/size';
@use '../../mixins/fluid';
@use '../../mixins/media-query';
@use '../../mixins/ms';

.o-feature-group {
  display: grid;
  grid-gap: fluid.fluid-clamp(
    size.$spacing-gap-fluid-min,
    size.$spacing-gap-fluid-max,
    breakpoint.$s,
    breakpoint.$xl
  );
  grid-template-areas:
    'intro'
    'content'
    'action';
  grid-template-rows: repeat(3, minmax(0, auto));

  /// 1. keep intro from crowding action for short items
  @media (min-width: breakpoint.$l) {
    grid-row-gap: ms.step(0); // 1
    grid-template-areas:
      'intro content content'
      'intro content content'
      'action content content';
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(0, auto) 1fr minmax(0, auto);
  }
}

.o-feature-group__intro {
  grid-area: intro;
}

.o-feature-group__content {
  grid-area: content;
}

.o-feature-group__action {
  grid-area: action;
}