@use "sass:meta";
@use "../../lib/mixin";
@use "../../settings";

/*
Break

The break module.

Weight: -99

Style guide: #{settings.$prefix}-table-grid.break
*/

/*
Modifiers

The break modifiers.
+ The breakpoint prefixes can be specified like as `sm:#{settings.$prefix}-table-grid--break`.

Weight: -100

Markup: <div class="#{settings.$prefix}-table-grid  {{modifier_class}}">
  <div class="#{settings.$prefix}-table-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-table-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <!-- content -->
  </div>
</div>

#{settings.$prefix}-table-grid--break - Break column.

Style guide: #{settings.$prefix}-table-grid.break.builtin
*/
.#{settings.$prefix}-table-grid--break {
  @include mixin.by-breakpoints() {
    --display: block;
    --height: auto;
    --column-display: block;
  }
}