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

<div class="flex-row gallery">
    <h3 class="underline csu-orange-line">3UP Gallery</h3>
    <figure class="featured _3up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _3up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _3up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _3up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _3up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</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="featured _4up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _4up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _4up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _4up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _4up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</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="featured _5up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _5up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _5up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _5up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
    <figure class="featured _5up">
        <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></div>
        <figcaption>Welcome to u!magine</figcaption>
    </figure>
</div>

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



<div class="flex-row gallery">
  <h3 class="underline csu-orange-line">{{ modifier }}</h3>
  <figure class="featured {{ size }}">
    {{{media}}}
      <figcaption>{{{ caption }}}</figcaption>
  </figure>
  <figure class="featured {{ size }}">
    {{{media}}}
      <figcaption>{{{ caption }}}</figcaption>
  </figure>
  <figure class="featured {{ size }}">
    {{{media}}}
      <figcaption>{{{ caption }}}</figcaption>
  </figure>
  <figure class="featured {{ size }}">
    {{{media}}}
      <figcaption>{{{ caption }}}</figcaption>
  </figure>
  <figure class="featured {{ size }}">
    {{{media}}}
      <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.