Shopify Debut theme help center code

<style>
 ul#help-center-category > li {
 border: {{ section.settings.border_px }}px solid transparent;
 }
 ul#help-center-category :hover {
 background: {{ section.settings.color_category_active }};
 }
 
 .background-active {
 background: {{ section.settings.color_category_active }};
 }
 
 ul#help-center-category > li:hover {
 border-color:{{ section.settings.border_color }};
 box-shadow: 10px 10px 2px 1px {{ section.settings.shadow_box_color }}; 
 }
 </style>
 {%- assign cat_per_row = section.settings.category_per_row -%}
 {%- assign blocks_size = section.blocks.size -%}
 
 {% if blocks_size <= cat_per_row %}
 {%- assign grid_item_width = 'category-per-row-' | append: blocks_size -%}
 {% else %}
 {%- assign grid_item_width = 'category-per-row-' | append: cat_per_row -%}
 {% endif %}
 
 
 <ul id="help-center-category" class="{{ grid_item_width }} category-per-row">
 {% for block in section.blocks %}
 <li>
 <a href="{{ block.settings.url }}">
 {% if section.settings.show_image %}
 {{ block.settings.image | img_url: '50x50' | img_tag: block.settings.image.alt, 'image-category' }}
 {% endif %}
 {% if section.settings.show_text %}
 <h6 title="{{ block.settings.category_name }}">
 <span><strong>{{ block.settings.category_name }}</strong></span><br/>
 </h6>
 <p style="font-size:16px;">{{ block.settings.category_des }} </p>
 {% endif %}
 </a>
 </li>
 {% endfor %}
 </ul>
 
 {% schema %}
 {
 "name": "Category",
 "settings": [
 {"type": "range",
 "id": "category_per_row",
 "label": "Category Per Row",
 "default": 5,
 "min": 1,
 "max": 6,
 "step": 1},
 
 {
 "type": "checkbox",
 "id": "show_image",
 "label": "Show Image",
 "default": true
 },
 {
 "type": "checkbox",
 "id": "show_text",
 "label": "Show Text",
 "default": true
 },
 {
 "type": "color",
 "id": "color_category_active",
 "label": "Category Active",
 "default": "#3d4246"
 },
 { 
 "type": "range",
 "id": "border_px",
 "label": "Border Width",
 "default": 1,
 "min": 1,
 "max": 5,
 "step": 1},
 { 
 "type": "color",
 "id": "border_color",
 "label": "Border Color",
 "default": "#eee"
 },
 { 
 "type": "color",
 "id": "shadow_box_color",
 "label": "Shadow Box color",
 "default": "#eee"
 }
 ],
 "blocks": [
 {
 "type": "category",
 "name": "Category",
 "settings": [
 {
 "type": "text",
 "id": "category_name",
 "label": "Title",
 "default": "Category Name"
 },
 {
 "type":"text",
 "id":"category_des",
 "label":"Description"
 },
 {
 "type": "url",
 "id": "url",
 "label": "Url"
 },
 {
 "type": "image_picker",
 "id": "image",
 "label": "Image"
 }
 
 ]
 }
 ],
 "presets": [
 {
 "name": "Category",
 "category": "category"
 }
 ]
 }
 {% endschema %}
 
 {% stylesheet %}
 
 
 ul#help-center-category {
 list-style: none;
 display: grid;
 margin: 0;
 padding: 0;
 margin-bottom: 30px;
 justify-items: center;
 width: 100%;
 cursor: pointer;
 }

 .category-per-row{
 grid-template-columns: 100%;
 }

 @media only screen and (min-width: 600px) {

 .category-per-row-1 {
 grid-template-columns: 100%;
 }

 .category-per-row-2 {
 grid-template-columns: 50% 50%;
 }

 .category-per-row-3 {
 grid-template-columns: 33% 34% 33%;
 }

 .category-per-row-4 {
 grid-template-columns: repeat(4, 25%);
 }

 .category-per-row-5 {
 grid-template-columns: repeat(5, 20%);
 }

 .category-per-row-6 {
 grid-template-columns: 16.6% 16.7% 16.7% 16.7% 16.7% 16.6%;
 }

 }

 ul#help-center-category > li {
 text-align: center;
 margin: 0;
 padding: 12px;
 width: 100%;
 height: 100%;
 overflow: hidden;
 box-shadow: none;
 position: relative;
 top: 0;
 left: 0;
 transition: 0.3s;
 }
 
 img.image-category {
 width: 50px;
 height: 50px;
 }
 
 ul#help-center-category > li:hover {
 top: -10px;
 left: -10px;
 }
 
 {% endstylesheet %}

<div class="page-width">
 <div class="grid">
 <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
 <div class="section-header text-center">
 <h1>{{ page.title }}</h1>
 </div>

 <div class="rte help-center">
 {% section 'help-center' %}
 </div>
 </div>
 </div>
</div>