how i can fix this custom collection page

[Manishuk01]

i want to create the same collection section as refrence on liquid code to add section. i ask chat gpt for code the given below the image

i want 12 collection section in a row on my pc view i want all 12 collection and mobile view i want 4 collection with slider

my website link - https://g8tiyz-ui.myshopify.com/

refrence website link - https://www.posterized.in

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Choose Collection"
        },
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Custom Image"
        },
        {
          "type": "url",
          "id": "custom_url",
          "label": "Custom URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections"
    }
  ]
}
{% endschema %}

  ## Shop by Collection

  
    {% for block in section.blocks %}
      {% if block.settings.collection != blank %}
        

          
            {% if block.settings.custom_image != blank %}
              
            {% elsif block.settings.collection.image != blank %}
              
            {% else %}
              
            {% endif %}
            

{{ block.settings.collection.title }}

          
        

      {% endif %}
    {% endfor %}
  

[wisn_shaftler]

@media only screen and (max-width: 768px) {
    .custom-collections-section .collections-container {
        display: flex;
        flex-direction: row;
        scroll-behavior: smooth;
        overflow-x: auto;
        padding-left: 0;
        padding-right: 0;
        justify-content: space-evenly;
    }
    
    .custom-collections-section .collections-container .collection-title {
        padding: 0;
        margin: 0;
        text-decoration: none;
    }
    
    .custom-collections-section .collections-container a {
        text-decoration: none;
        line-height: 1.5;
    }
    
    .custom-collections-section {
        padding-left: 0;
        padding-right: 0;
    }
    
    .custom-collections-section h2.text-center {
        padding-left: 20px;
    }

}

do your other styling. this is for basic stuff

[Arif_Shopidevs]

@Manishuk01
here is the final code for you

{% schema %}
{
  "name": "Custom Collections",
  "settings": [],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Choose Collection"
        },
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Custom Image"
        },
        {
          "type": "url",
          "id": "custom_url",
          "label": "Custom URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Collections"
    }
  ]
}
{% endschema %}

  ## Shop by Collection

  
    

      {% for block in section.blocks %}
        {% if block.settings.collection != blank %}
          

            
              {% if block.settings.custom_image != blank %}
                
              {% elsif block.settings.collection.image != blank %}
                
              {% else %}
                
              {% endif %}
              

{{ block.settings.collection.title }}

            
          

        {% endif %}
      {% endfor %}
    

  

which will look like