<!-- Default -->
<h2 class="label">3UP Gallery</h2>

<div class="flex-row gallery">
    <h3 class="underline csu-orange-line">3UP Gallery</h3>
    <figure class="_3up">
        <img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_3up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_3up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_3up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_3up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_3up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
</div>

<!-- 4 Up -->
<h2 class="label">4UP Gallery</h2>

<div class="flex-row gallery">
    <h3 class="underline csu-orange-line">4UP Gallery</h3>
    <figure class="_4up">
        <img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_4up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_4up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_4up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_4up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_4up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
</div>

<!-- 5 Up -->
<h2 class="label">5UP Gallery</h2>

<div class="flex-row gallery">
    <h3 class="underline csu-orange-line">5UP Gallery</h3>
    <figure class="_5up">
        <img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_5up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_5up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_5up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_5up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
    <figure class="_5up"><img src="../../images/landscape.jpg" />
        <figcaption>Mountain Views</figcaption>
    </figure>
</div>

<h2 class="label">{{ modifier }}</h2>

<div class="flex-row gallery">
  <h3 class="underline csu-orange-line">{{ modifier }}</h3>
  <figure class="{{ size }}">
    <img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
  <figure class="{{ size }}"><img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
  <figure class="{{ size }}"><img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
  <figure class="{{ size }}"><img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
  <figure class="{{ size }}"><img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
  <figure class="{{ size }}"><img src="{{path image }}" />
    <figcaption>{{ caption }}</figcaption>
  </figure>
</div>

Images inside a <figure> element can be grouped into gallerys and can include separate captions. Size of images can be set using the size modifiers _3up, _4up & _5up.