Changing image size and max amounts of images in image gallery

[margarita7]

Hi! I am using the Editorial theme and trying to change the layout of my image gallery. It currently looks like this:

And what I'm trying to achieve is something like this:

After going through all posts I could find in the shopify community I tried editing my gallery.liquid file to say "max_blocks": 20, instead of 10. But that didn't change anything. Something is missing, but I can't figure out what. Any ideas?

My gallery.liquid code:

<!-- /snippets/section_gallery.liquid -->

{% if section.blocks.size > 0 %}
  {% capture block__1 %}
    {% render 'gallery-item',
       image: section.blocks[0].settings.image,
       caption: section.blocks[0].settings.caption,
       link: section.blocks[0].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 1 %}
  {% capture block__2 %}
    {% render 'gallery-item',
       image: section.blocks[1].settings.image,
       caption: section.blocks[1].settings.caption,
       link: section.blocks[1].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 2 %}
  {% capture block__3 %}
    {% render 'gallery-item',
       image: section.blocks[2].settings.image,
       caption: section.blocks[2].settings.caption,
       link: section.blocks[2].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 3 %}
  {% capture block__4 %}
    {% render 'gallery-item',
       image: section.blocks[3].settings.image,
       caption: section.blocks[3].settings.caption,
       link: section.blocks[3].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 4 %}
  {% capture block__5 %}
    {% render 'gallery-item',
       image: section.blocks[4].settings.image,
       caption: section.blocks[4].settings.caption,
       link: section.blocks[4].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 5 %}
  {% capture block__6 %}
    {% render 'gallery-item',
       image: section.blocks[5].settings.image,
       caption: section.blocks[5].settings.caption,
       link: section.blocks[5].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 6 %}
  {% capture block__7 %}
    {% render 'gallery-item',
       image: section.blocks[6].settings.image,
       caption: section.blocks[6].settings.caption,
       link: section.blocks[6].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 7 %}
  {% capture block__8 %}
    {% render 'gallery-item',
       image: section.blocks[7].settings.image,
       caption: section.blocks[7].settings.caption,
       link: section.blocks[7].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 8 %}
  {% capture block__9 %}
    {% render 'gallery-item',
       image: section.blocks[8].settings.image,
       caption: section.blocks[8].settings.caption,
       link: section.blocks[8].settings.url,
    %}
  {% endcapture %}
{% endif %}
{% if section.blocks.size > 9 %}
  {% capture block__10 %}
    {% render 'gallery-item',
       image: section.blocks[9].settings.image,
       caption: section.blocks[9].settings.caption,
       link: section.blocks[9].settings.url,
    %}
  {% endcapture %}
{% endif %}

<section class="section bg--section section--gallery m0 {% if section.settings.title != '' %}py4{% else %}py3{% endif %}" data-section-type="gallery" data-section-id="{{ section.id }}">
  <div class="wrapper section--wrapper">

    {% if section.settings.title != '' %}
    <h2 class="t--section-title text-align--center f--main font-size--l lg--font-size--xl m0 mb3">{{ section.settings.title | escape }}</h2>
    {% endif %}

    <div class="grid grid--gallery mxn1">

      {% unless section.blocks.size == 5 or section.blocks.size == 10 %}
        {%- assign grid_item_width = '' -%}
        {%- case section.blocks.size  -%}
          {%- when 2 -%}
            {%- assign grid_item_width = 'lg--one-half' -%}
          {%- when 3 -%}
            {%- assign grid_item_width = 'lg--one-third' -%}
          {%- when 4 -%}
            {%- assign grid_item_width = 'lg--one-quarter' -%}
          {%- when 6 -%}
            {%- assign grid_item_width = 'lg--one-third' -%}
          {%- when 7 -%}
            {%- assign grid_item_width = 'lg--one-quarter' -%}
          {%- when 8 -%}
            {%- assign grid_item_width = 'lg--one-quarter' -%}
          {%- when 9 -%}
            {%- assign grid_item_width = 'lg--one-third' -%}
        {%- endcase -%}

        {% for block in section.blocks %}
          {% if section.blocks.size == 7 %}
            {%- assign grid_item_width = 'lg--one-third' -%}
            {% if forloop.index > 3 %}
            {%- assign grid_item_width = 'lg--one-quarter' -%}
            {% endif %}
          {% endif %}
        <div class="grid__item {{ grid_item_width }} mt1">
          {% render 'gallery-item',
             image: block.settings.image,
             caption: block.settings.caption,
             link: block.settings.url,
          %}
        </div>
        {% endfor %}
      {% endunless %}

      {% if section.blocks.size == 10 %}
      <div class="grid__item grid grid--gallery grid--gallery--sub-grid mt1">
        <div class="grid__item lg--one-half">
          {{ block__1 }}
        </div>
        <div class="grid__item mt1 lg--mt0 lg--one-half">
          <div class="grid grid--gallery grid--gallery-inner">
            <div class="grid__item one-half">
              {{ block__2 }}
            </div>
            <div class="grid__item one-half">
              {{ block__3 }}
            </div>
            <div class="grid__item one-half">
              {{ block__4 }}
            </div>
            <div class="grid__item one-half">
              {{ block__5 }}
            </div>
          </div>
        </div>
      </div>
      <div class="grid__item grid grid--gallery grid--gallery--sub-grid">
        <div class="grid__item lg--one-half mt1">
          <div class="grid grid--gallery grid--gallery-inner">
            <div class="grid__item one-half">
              {{ block__6 }}
            </div>
            <div class="grid__item one-half">
              {{ block__7 }}
            </div>
            <div class="grid__item one-half">
              {{ block__8 }}
            </div>
            <div class="grid__item one-half">
              {{ block__9 }}
            </div>
          </div>
        </div>
        <div class="grid__item lg--one-half mt1">
          {{ block__10 }}
        </div>
      </div>
      {% endif %}

      {% if section.blocks.size == 5 %}
      <div class="grid__item grid grid--gallery grid--gallery--sub-grid mt1">
        <div class="grid__item mt1 lg--mt0 lg--one-quarter">
          <div class="grid grid--gallery grid--gallery-inner">
            <div class="grid__item">
              {{ block__1 }}
            </div>
            <div class="grid__item">
              {{ block__2 }}
            </div>
          </div>
        </div>
        <div class="grid__item lg--one-half">
          {{ block__3 }}
        </div>
        <div class="grid__item lg--one-quarter">
          <div class="grid grid--gallery grid--gallery-inner">
            <div class="grid__item">
              {{ block__4 }}
            </div>
            <div class="grid__item">
              {{ block__5 }}
            </div>
          </div>
        </div>
      </div>
      {% endif %}
    </div>

  </div>
</section>

{% schema %}
{
  "name": "Gallery",
  "class": "gallery",
  "max_blocks": 10,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Gallery",
      "info": "Leave blank if you don't want to show a section title."
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Link (optional)"
        },
        {
          "type": "richtext",
          "id": "caption",
          "label": "Caption (optional)"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Gallery",
      "category": "Image",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }

          
      ]
    }
  ]
}
{% endschema %}

This is the page I'm trying to change: https://freakysauces.com/blogs/recipes