Shopify Category showcase (fetch from Metafileds)

<link href= "{{"custom-category.css" | asset_url }}" type="text/css" rel="stylesheet">
<style>
 .outboxads_yt-{{ section.id }}{
   --content-align-mo: {{ section.settings.content-align-mo }};
   --border-color: {{ section.settings.border_color }};
   --img-border: {{ section.settings.img_border_wi }}px;

   --img-fit: {{ section.settings.object_fit_con }};

   --img-width: clamp({{ section.settings.min_size_mobile }}px, 15vw, {{ section.settings.max_size_desktop }}px);
   --img-radius:{{ section.settings.img_radius | divided_by: 2 }}%;
}
</style>

 <div class= "custom_cat_contain outboxads_yt-{{ section.id }}">
    {% if section.settings.cus_cat_title %}
     <h3 class= "collage_Title" >{{section.settings.custom_col_title}}</h3>
        <p class= "collage_Description" >{{section.settings.custom_col_description}}</p>
        {% endif %}
         <div class="custom_cat_sec">
          {% for blocks in section.blocks %}
            <div class= "custom_grids">
          <a href="{{ blocks.settings.imagelink }}">
         <img class="collage_Images image_outline objfitCover" src="{{blocks.settings.col_images | img_url: '1080x' }}" loading="lazy">
          </a>
         <p> {{blocks.settings.cat_title}} </p>
     </div>
    {% endfor %}
   </div>
</div>

{% schema %}
  {
    "name": "Custom Category Section",
    "settings": [
      {
      "type": "checkbox",
      "id": "cus_cat_title",
      "label": "Enable title description",
      "default": false
      },
       {
       "type": "text",
        "id": "custom_col_title",
        "label": "Section Title"
       },
       {
       "type": "textarea",
        "id": "custom_col_description",
        "label": "Short Description"
       },
      {
      "type": "header",
      "content": "Image Fit"
      },
       {
        "type": "select",
        "id": "object_fit_con",
        "label": "Image fit settings",
        "info": "want source code [https://pastebin.com/s0GUUyur]",
        "options": [
          {
            "value": "contain",
            "label": "Contain"
          },
          {
            "value": "cover",
            "label": "Cover"
          }
        ],
        "default": "cover"
      },
      {
      "type": "header",
      "content": "Grid Size"
      },
      {
        "type": "range",
        "id": "min_size_mobile",
        "min": 70,
        "max": 110,
        "step": 5,
        "unit": "px",
        "label": "For Mobile",
        "default": 80
      },
      {
        "type": "range",
        "id": "max_size_desktop",
        "min": 90,
        "max": 120,
        "step": 5,
        "unit": "px",
        "label": "For Desktop",
        "default": 115
      },
      {
        "type": "range",
        "id": "img_radius",
        "min": 0,
        "max": 100,
        "step": 5,
        "unit": "%",
        "label": "Block Shape Radius",
        "default": 100
      },
      {
      "type": "header",
      "content": "Settings For Mobile"
      },
      {
        "type": "select",
        "id": "content-align-mo",
        "label": "Content align for mobile",
        "options": [
          {
            "value": "start",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "center"
          },
          {
            "value": "end",
            "label": "Right"
          }
        ],
        "default": "start"
      },
      {
      "type": "header",
      "content": "Border settings"
      },
      {
        "type": "color",
        "id": "border_color",
        "label": "Border Color",
        "default": "#e8e8e8"
      },
      {
        "type": "range",
        "id": "img_border_wi",
        "min": 0,
        "max": 4,
        "step": 1,
        "unit": "px",
        "label": "Border size",
        "info" : "To remove border, set it to 0",
        "default": 1
        }
  ],
    "blocks":[
      {
     "name":" Section Block",
      "type":"collage_image",
      "settings":[
          {
           "type": "image_picker",
           "id": "col_images",
           "label": "collage Image",
           "info" : "Use 1:1 size image i.e.600 X 600px"
           },
           {
           "type": "url",
           "id": "imagelink",
           "label": "Image link"
           },
          {
          "type": "text",
          "id": "cat_title",
          "label": "Category Title",
          "info" : "try to use 1 word only"
          }

           ]
      }
   ],
    "presets": [
        {
        "name": "Custom Category by OutBoxAds"
        }
        ]
  }
{% endschema %}

{% comment %}
 //**Note: All rights and commercial license reserved by outboxads digital services & co. sharing under intellectual property under act B568-C(12).**//
{% endcomment %}