@use "../../lib/mixin";
@use "../../settings";

/*
Align items

The align items module.

Weight: -97

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

/*
Modifiers

The align items modifiers.

Weight: -100

Markup: <div class="#{settings.$prefix}-flex-grid  {{modifier_class}}">
  <div class="#{settings.$prefix}-flex-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>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <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>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <p class="#{settings.$prefix}-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <img class="#{settings.$prefix}-pict__src" src="https://placehold.co/200x150" alt="" width="200" height="150" loading="auto" />
    </figure>
    <!-- content -->
  </div>
  <div class="#{settings.$prefix}-flex-grid__column">
    <!-- content -->
    <figure class="#{settings.$prefix}-pict  #{settings.$prefix}-pict--fit-max-width  #{settings.$util-prefix}--float-left">
      <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>
    <!-- content -->
  </div>
</div>

#{settings.$prefix}-flex-grid--align-items-stretch - Items alignment on axis with stretch
#{settings.$prefix}-flex-grid--align-items-start - Starting items alignment on axis
#{settings.$prefix}-flex-grid--align-items-center - Center items alignment on axis
#{settings.$prefix}-flex-grid--align-items-end - Ending items alignment on axis

Style guide: #{settings.$prefix}-flex-grid.align-items.builtin
*/
.#{settings.$prefix}-flex-grid--align-items {
  &-stretch {
    --align-items: stretch;
  }

  &-start {
    --align-items: flex-start;
  }

  &-center {
    --align-items: center;
  }

  &-end {
    --align-items: flex-end;
  }
}