{%- unless blockID contains section_id -%}
    {%- assign block_id = block_id | prepend: ' ' | prepend: sectionID -%}
{%- endunless -%}

{%- case type -%}
    {%- when 'paragraph' -%}
        {%- for i in (1..3) -%}
            {%- liquid              
                assign text_fs        = 'text_fs_' | append: i
                assign text_cl        = 'text_cl_' | append: i
                assign text_fs        = block.settings[text_fs]
                assign text_cl        = block.settings[text_cl] | default: 'rgba(0,0,0,0)'
            -%}
            {%- capture text_id -%}{{ blockID }} .content-text-{{ i }}{%- endcapture -%}

            {%- capture block_css -%}
                {%- unless text_cl == 'rgba(0,0,0,0)' -%}color: {{ text_cl }};{%- endunless -%}
                {%- render 'css-resp', type: 'value', showFirst: true, css_value: text_fs, css_property: 'font-size' -%}
            {%- endcapture -%}

            {%- render 'css-resp', classID: text_id, css_values: block_css -%}
            {%- render 'css-resp', classID: text_id, showLast: true, css_value: text_fs, css_property: 'font-size' -%}
        {%- endfor -%}

    {%- when 'button' -%}
        {%- liquid
            assign btn_cl                 = block.settings.btn_cl | default: 'rgba(0,0,0,0)'
            assign btn_bg_cl              = block.settings.btn_bg_cl | default: 'rgba(0,0,0,0)'
            assign btn_border_cl          = block.settings.btn_border_cl | default: 'rgba(0,0,0,0)'
            assign btn_hover_cl           = block.settings.btn_hover_cl | default: 'rgba(0,0,0,0)'
            assign btn_hover_bg_cl        = block.settings.btn_hover_bg_cl | default: 'rgba(0,0,0,0)'
            assign btn_hover_border_cl    = block.settings.btn_hover_border_cl | default: 'rgba(0,0,0,0)'
            assign btn_fw                 = block.settings.btn_fw
            assign btn_padding            = block.settings.btn_padding
            assign btn_fs                 = block.settings.btn_fs
            assign btn_radius             = block.settings.btn_radius
        -%}

        {%- capture block_css -%}
            {%- unless btn_cl         == 'rgba(0,0,0,0)' -%}color: {{ btn_cl }};{%- endunless -%}
            {%- unless btn_bg_cl      == 'rgba(0,0,0,0)' -%}background-color: {{ btn_bg_cl }};{%- endunless -%}
            {%- unless btn_border_cl  == 'rgba(0,0,0,0)' -%}border-color: {{ btn_border_cl }};{%- endunless -%}
            {%- if btn_fw > 0 -%}font-weight: {{ btn_fw }};{%- endif -%}
            {%- render 'css-resp', type: 'value', showFirst: true, css_value: btn_padding, css_property: 'padding' -%}
            {%- render 'css-resp', type: 'value', showFirst: true, css_value: btn_fs, css_property: 'font-size' -%}
            {%- render 'css-resp', type: 'value', showFirst: true, css_value: btn_radius, css_property: 'border-radius' -%}
        {%- endcapture -%}

        {%- render 'css-resp', classID: blockID, nextClassID: ' .btn-slide', css_values: block_css -%}
        {%- render 'css-resp', classID: blockID, nextClassID: ' .btn-slide', showLast: true, css_value: btn_padding -%}
        {%- render 'css-resp', classID: blockID, nextClassID: ' .btn-slide', showLast: true, css_value: btn_fs, css_property: 'font-size' -%}
        {%- render 'css-resp', classID: blockID, nextClassID: ' .btn-slide', showLast: true, css_value: btn_radius, css_property: 'border-radius' -%}


        {%- capture first_values -%}
          {%- unless btn_hover_cl         == 'rgba(0,0,0,0)' -%}color: {{ btn_hover_cl }};{%- endunless -%}
          {%- unless btn_hover_bg_cl      == 'rgba(0,0,0,0)' -%}background-color: {{ btn_hover_bg_cl }};{%- endunless -%}
          {%- unless btn_hover_border_cl  == 'rgba(0,0,0,0)' -%}border-color: {{ btn_hover_border_cl }};{%- endunless -%}
        {%- endcapture -%}

        {%- render 'css-resp', classID: blockID, nextClassID: ' .btn-slide:hover', css_values: first_values -%}

    {%- when 'image_layout' -%}
        {%- liquid
            assign pos        = block.settings.position
            if block.settings.image_max_w == blank
            assign max_width    = '520px'
            else
            assign max_width    = block.settings.image_max_w
            endif
        -%}
        {%- render 'css-resp', classID: blockID, nextClassID: ' .image-layer-box', css_value: max_width, css_property: 'max-width' -%}
        {%- render 'css-resp', classID: blockID, nextClassID: ' .image-layer-box', css_value: pos, type: 'position' -%}

{%- endcase -%}