Gallery Block Complete

  <div class="js-this c-gallery-block c-block u-background-color--gray--light u-border--left u-theme--border-color--darker--left can-be--dark-dark">
    <div class="c-gallery-block__header">
      <div class="c-gallery-block__title u-padding u-spacing--half">
                  <h2 class="u-font--primary--s u-theme--color--darker">
            <span class="u-theme--color--base"><em>Gallery</em></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </h2>
                <button class="c-gallery-block__toggle js-toggle o-button o-button--outline o-button--toggle o-button--small" data-toggled="this" data-prefix="this"><span class="u-icon u-icon--xs u-path-fill--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__plus</title><path d="M10,4H6V0H4V4H0V6H4v4H6V6h4Z" fill="#9b9b9b"/></svg>
</span></button>
      </div> <!-- /.c-gallery-block__title -->
                        <div class="c-gallery-block__thumb u-background--cover">
            <style>
              .c-gallery-block__thumb {
                background: url('//picsum.photos/300x300') center center no-repeat;
              }
            </style>
          </div> <!-- /.c-gallery-block__thumb -->
                                </div> <!-- /.c-gallery-block__header -->
          <div class="c-gallery-block__body">
                  <div class="c-gallery-block__image ">
                          <img src="//picsum.photos/900x500" alt="Alt Text" />
                                      <div class="c-gallery-block__caption u-font--secondary--s u-color--gray u-padding u-padding--double--bottom">
                Nam pretium et mauris sit amet vehicula. Morbi at est tristique, mollis odio ut, dignissim tellus.
              </div> <!-- /.c-gallery-block_caption -->
                      </div> <!-- /.c-gallery-block__iamge -->
                  <div class="c-gallery-block__image is-portrait">
                          <img src="//picsum.photos/400x600" alt="Alt Text" />
                                      <div class="c-gallery-block__caption u-font--secondary--s u-color--gray u-padding u-padding--double--bottom">
                Duis eu pharetra magna. Curabitur vulputate mattis dignissim.
              </div> <!-- /.c-gallery-block_caption -->
                      </div> <!-- /.c-gallery-block__iamge -->
              </div> <!-- /.c-gallery-block__body -->
      </div> <!-- /.c-gallery-block -->

{% if gallery_block_default %}
  <div class="js-this c-gallery-block c-block u-background-color--gray--light u-border--left u-theme--border-color--darker--left can-be--dark-dark">
    <div class="c-gallery-block__header">
      <div class="c-gallery-block__title u-padding u-spacing--half">
        {% if gallery_block_default.title %}
          <h2 class="u-font--primary--s u-theme--color--darker">
            <span class="u-theme--color--base"><em>Gallery</em></span> {{ gallery_block_default.title }}
          </h2>
        {% endif %}
        <button class="c-gallery-block__toggle js-toggle o-button o-button--outline o-button--toggle o-button--small" data-toggled="this" data-prefix="this"><span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/icon-plus.twig' %}</span></button>
      </div> <!-- /.c-gallery-block__title -->
      {% for item in gallery_block_default.items %}
        {% if loop.first %}
          <div class="c-gallery-block__thumb u-background--cover">
            <style>
              .c-gallery-block__thumb {
                background: url('{{ item.img.src }}300x300') center center no-repeat;
              }
            </style>
          </div> <!-- /.c-gallery-block__thumb -->
        {% endif %}
      {% endfor %}
    </div> <!-- /.c-gallery-block__header -->
    {% if gallery_block_default.items %}
      <div class="c-gallery-block__body">
        {% for item in gallery_block_default.items %}
          <div class="c-gallery-block__image {% if item.portrait %}{{ 'is-portrait' }}{% endif %}">
            {% if item.portrait %}
              <img src="{{ item.img.src }}400x600" alt="{{ item.img.alt }}" />
            {% else %}
              <img src="{{ item.img.src }}900x500" alt="{{ item.img.alt }}" />
            {% endif %}
            {% if item.caption %}
              <div class="c-gallery-block__caption u-font--secondary--s u-color--gray u-padding u-padding--double--bottom">
                {{ item.caption }}
              </div> <!-- /.c-gallery-block_caption -->
            {% endif %}
          </div> <!-- /.c-gallery-block__iamge -->
        {% endfor %}
      </div> <!-- /.c-gallery-block__body -->
    {% endif %}
  </div> <!-- /.c-gallery-block -->
{% endif %}