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

/*
Break

The break module.

Weight: -99

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

/*
Modifiers

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

Weight: -100

Markup: <div class="#{settings.$prefix}-flex-grid  {{modifier_class}}">
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- contents -->
    <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>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- contents -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- contents -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <p class="#{settings.$prefix}-text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
    <!-- contents -->
  </div>
</div>

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

Style guide: #{settings.$prefix}-flex-grid.break.builtin
*/
.#{settings.$prefix}-flex-grid--break {
  @include mixin.by-breakpoints() {
    --flex-direction: column;
  }
}