@use "../../../styles/breakpoints.scss";
@use "../../../styles/grid.scss";

.root {
  @include grid.grid-item($auto-layout: false);
}

@each $breakpoint, $grid-cols in grid.$grid-columns {
  @for $columns from 1 through $grid-cols {
    .root.columns-#{$breakpoint}-#{$columns} {
      @include breakpoints.breakpoint-at-least($breakpoint) {
        @include grid.grid-item-columns($columns);
      }
    }

    .root.offset-#{$breakpoint}-#{$columns} {
      @include breakpoints.breakpoint-at-least($breakpoint) {
        @include grid.grid-item-offset($columns);
      }
    }
  }

  .root.columns-#{$breakpoint} {
    @include breakpoints.breakpoint-at-least($breakpoint) {
      @include grid.grid-item-columns-auto-layout();
    }
  }
}

.root.autolayout {
  @include grid.grid-item-columns-auto-layout();
}