Show post content in index.hbs

Bob, I was happy too early. I tried to solve this myself and tried 8 times in different way, but not working correct. I am doing something wrong. I did like you said and it works only for first section. But the rest of sections are working not correct. I will try to explain in details:

As I wrote from the beginning I have four sections in index file:

<section class="club-section"></section> 
<section class="events-section"></section> 
<section class="private-section"></section> 
<section class="food-section"></section>

in each of this sections I added:

{{#getPostsByTags (concatenate "count=8&tag_as=id" "&tags="@config.custom.ClubTagDropdown
      "&orderby=modifiedAt&ordering=asc")}}
       {{> post-head}}
          <article class="post">
              <header class="post__header">
                <h3>{{title}}</h3>
              </header>
              

                {{#if @config.custom.lazyLoad}}
                    {{{lazyLoadForContentImages text @config.custom.lazyLoadEffect}}}
                {{else}}
                    {{{text}}}
                {{/if}}
              
              <footer class="post__footer hover-target">
                

                  

                
              </footer>
          </article>
       {{> post-footer}}
 {{/getPostsByTags}}

in post-head I did like you said and changed gallery code to this:

{{#is "index"}}
  {{#if hasGallery}}
    <link rel="stylesheet" href="{{css "photoswipe.css" }}">
  {{/if}}
{{/is}}
{{jsonLD}}
{{#is "index"}}
  <script>
    window.addEventListener(
      'load',
      function load() {
        window.removeEventListener('load', load, false);
        document.body.classList.remove('js-loading');
      },
      false);
    </script>
{{/is}}
{{#if @config.custom.lazyLoad}}
  <script async src="{{js "lazysizes.min.js"}}"></script>
{{/if}}
{{#is "index"}}
  <style>
    {{#checkIf @config.custom.galleryLightboxStyle '==' "pswp--dark" }}
        .pswp--svg .pswp__button,
        .pswp--svg .pswp__button--arrow--left:before,
        .pswp--svg .pswp__button--arrow--right:before {
          background-image: url({{@website.assetsUrl}}/svg/gallery-icons-light.svg);
        }
    {{else}}
        .pswp--svg .pswp__button,
        .pswp--svg .pswp__button--arrow--left:before,
        .pswp--svg .pswp__button--arrow--right:before {
          background-image: url({{@website.assetsUrl}}/svg/gallery-icons-dark.svg);
        }
    {{/checkIf}}
  </style>
{{/is}}

In post-footer I also did like you said and changed to this:

{{#is "index"}}
  {{#if hasGallery}}
     {{> photoswipe}}
  {{/if}}
{{/is}}

I did this way in each section. I was happy because it works for the first section. But when I did it with the rest of the sections, in rest it works not correct. In rest of sections it opens not in front of the gallery, but in the back of the whole section.

I don’t understand why it works good for first section but not for the rest? I tried to give the whole four sections common wrapper and place post-head and post-footer there, but it is not working. I tried to play with this idea and wrapper, but everytime it works not correct.

I am using portfolio theme.

If it is not enough, I can upload it to netlify.

Please, Save me!