{{ 'section-three-column-feature.css' | asset_url | stylesheet_tag }}

<div class="{% if section.settings.fullwidth == false %}page-width {% else %}full-width{% endif %}">
  <div class="three-columns-main">
    {% for block in section.blocks %}
    {% case block.type  %}
    {% when 'fullimage' %}
    <div class="three-columns-inner {{ block.type }} fi-{{block.id}}">
      {% if block.settings.image_link != blank %}
      <a href="{{ block.settings.image_link }}">              
        {% endif %}
        <div class="offsets">
          <div class="three-columns-thumb">
            {% if block.settings.hover_button_text != blank and  block.settings.image_link %}
            <div class="overlay" style="display: block;
    position: absolute;
    bottom: 50px;
    left: 30px;">
              <div class="overlay copy">
                <span class="h3" style="color:white;">{{ block.settings.hover_button_text }}</span>
              </div>
            </div>                  
            {% endif %}
          </div>
        </div>
        {% if block.settings.image_link != blank %}
      </a>
      {% endif %}
    </div>
    <style>
      .fi-{{block.id}} .three-columns-thumb {
        background-image:url({{ block.settings.image | img_url: '800x' }});
        background-position:{{block.settings.image1hang}};
      }
      .fi-{{block.id}} .three-columns-thumb:before {
      content:"";
      background-color:#000000;
      opacity:.2;
      display:block;
      height:100%;
      width:100%;
      position: absolute;
      top: 0;
          }

      .fi-{{block.id}} .offsets {
        padding-top:{{block.settings.padding-top}}%;
        padding-right:{{block.settings.padding-right}}%;
        padding-bottom:{{block.settings.padding-bottom}}%;
        padding-left:{{block.settings.padding-left}}%;
        height:100%;
      }

      @media screen and (max-width: 749px) {
        .fi-{{block.id}} .three-columns-thumb {
          {% if block.settings.image-mobile %}
          background-image:url({{ block.settings.image-mobile | img_url: '800x' }}); 
          {%else%}
          background-image:url({{ block.settings.image | img_url: '800x' }}); 
          {%endif%}
          background-position:{{block.settings.image1hang-mobile}};
        }
      }          
    </style>

    {% when 'image_with_copy' %}
    <div class="three-columns-inner {{ block.type }} iwc-{{block.id}}">
      {% capture block_image %}
      {% if block.settings.image_link != blank %}
      <a href="{{ block.settings.image_link }}">              
        {% endif %}
        <div class="offsets">
          <div class="three-columns-thumb">
            {% if block.settings.hover_button_text != blank and block.settings.image_link %}
            <div class="image-hover">
              <div class="image-hover-effect">
                <span>{{ block.settings.hover_button_text }}</span>
                <img src="https://cdn.shopify.com/s/files/1/0395/8630/0070/files/Group_619.svg?v=1607488777" alt="image">
              </div>
            </div>                  
            {% endif %}
          </div>
        </div>
        {% if block.settings.image_link != blank %}
      </a>              
      {% endif %}
      {% endcapture %}
      {% capture block_text %}
      <div class="copy-main">
        {% if block.settings.heading != blank %}
        <div class="copy-title h2" style="margin-bottom:0px;"> 
          {{ block.settings.heading }}
        </div>
        {% endif %}
        {% if block.settings.text != blank %}
        <div class="copy-details">
          {{ block.settings.text }}
        </div>
        {% endif %}
        <div class="copy-links">
          <ul>
            {% if block.settings.cta1_text != blank and block.settings.cta1_link != blank  %}
            <li> <a {%if block.settings.buttons%}class="button button--primary"{%endif%} href="{{ block.settings.cta1_link }}">{{ block.settings.cta1_text }}</a></li>
            {% endif %}
            {% if block.settings.cta2_text != blank and block.settings.cta2_link != blank %}
            <li> <a {%if block.settings.buttons%}class="button button--primary"{%endif%} href="{{ block.settings.cta2_link }}">{{ block.settings.cta2_text }}</a></li>
            {% endif %}
          </ul>  
        </div>
      </div>
      {% endcapture %}
      {% if block.settings.copy_position == true %}
      {{ block_image }}  
      {{ block_text }}  
      {% else %} 
      {{ block_text }}  
      {{ block_image }} 
      {% endif %}
    </div>
    <style>

      .iwc-{{block.id}} .copy-links ul {
        list-style-type: none;
        padding: 0px;
        display:flex;
      }

      .iwc-{{block.id}} .copy-links .button {
        padding-top: 1.4rem;
        padding-bottom: 1.3rem;
        background-color: {{block.settings.butt-bgcolor}};
        color: {{block.settings.butt-textcolor}} !important;
      }

      .iwc-{{block.id}} .copy-links li {
        margin-right:10px;
        font-weight:bold;
      }
      
      {%unless block.settings.buttons %}
      .iwc-{{block.id}} .copy-links li a {
        color:{{block.settings.textcolor}} !important;
      }      
      {%endunless%}

      .iwc-{{block.id}} .three-columns-thumb {
        background-image:url({{ block.settings.image | img_url: '800x' }});
        padding:{{block.settings.height}}% 0 !important; 
        background-position:{{block.settings.image1hang}};
      }

      @media screen and (max-width: 749px) {
        .iwc-{{block.id}} .three-columns-thumb {
          padding:{{block.settings.height-mobile}}% 0 !important; 
          {% if block.settings.image-mobile %}
          background-image:url({{ block.settings.image-mobile | img_url: '800x' }}); 
          {%else%}
          background-image:url({{ block.settings.image | img_url: '800x' }}); 
          {%endif%}
          background-position:{{block.settings.image1hang-mobile}};
        }
      }

      .iwc-{{block.id}} .offsets {
        padding-top:{{block.settings.padding-top}}%;
        padding-right:{{block.settings.padding-right}}%;
        padding-bottom:{{block.settings.padding-bottom}}%;
        padding-left:{{block.settings.padding-left}}%;            
      }
      .iwc-{{block.id}} .copy-main {
        padding-left:{{block.settings.padding-copy}}%;
        padding-right:{{block.settings.padding-copy}}%;
        padding-top:{{block.settings.padding-copyh}}%;
        padding-bottom:{{block.settings.padding-copyh}}%;
        text-align: {{block.settings.text_align}};
      }

      .iwc-{{block.id}} .copy-title {
        font-size:{{block.settings.fontsize}}px;
        color:{{block.settings.headcolor}} !important;
      }
      @media screen and (max-width: 749px) {
        .iwc-{{block.id}} .copy-title{
          font-size:{{block.settings.fontsize-mobile}}px;
        }
      }


      .iwc-{{block.id}} .copy-details p{
        font-size:{{block.settings.fontsize-copy}}px;
        color:{{block.settings.textcolor}} !important;
      }
      @media screen and (max-width: 749px) {
        .iwc-{{block.id}} .copy-details {
          font-size:{{block.settings.fontsize-copy-mobile}}px;
        }
      }

    </style>


    {% when 'fifty_fifty_image' %}
    <div class="three-columns-inner {{ block.type }} ff-{{block.id}}">
      <div class="fifty-fifty-wrap">
        {% if block.settings.image1_link %}
        <a href="{{ block.settings.image1_link }}">              
          {% endif %}
          <div class="offsets">
            <div class="three-columns-thumb im1">
              {% if block.settings.hover_button1_text != blank and block.settings.image1_link %}
              <div class="image-hover">
                <div class="image-hover-effect">
                  <span>{{ block.settings.hover_button1_text }}</span>
                  <img src="https://cdn.shopify.com/s/files/1/0395/8630/0070/files/Group_619.svg?v=1607488777" alt="image">
                </div>
              </div>                  
              {% endif %}
            </div>
          </div>
          {% if block.settings.image1_link %}
        </a>
        {% endif %}
      </div>
      <div class="fifty-fifty-wrap">
        {% if block.settings.image2_link %}
        <a href="{{ block.settings.image2_link }}">              
          {% endif %}
          <div class="offsets2">
            <div class="three-columns-thumb im2">
              {% if block.settings.hover_button2_text != blank and block.settings.image2_link %}
              <div class="image-hover">
                <div class="image-hover-effect">
                  <span>{{ block.settings.hover_button2_text }}</span>
                  <img src="https://cdn.shopify.com/s/files/1/0395/8630/0070/files/Group_619.svg?v=1607488777" alt="image">
                </div>
              </div>                  
              {% endif %}
            </div></div>
          {% if block.settings.image2_link %}
        </a>
        {% endif %}
      </div>
    </div>

    <style>

      .ff-{{block.id}} .offsets {
        padding-top:{{block.settings.padding-top}}%;
        padding-right:{{block.settings.padding-right}}%;
        padding-bottom:{{block.settings.padding-bottom}}%;
        padding-left:{{block.settings.padding-left}}%;
        height:100%;
      }

      .ff-{{block.id}} .offsets2 {
        padding-top:{{block.settings.padding-top2}}%;
        padding-right:{{block.settings.padding-right2}}%;
        padding-bottom:{{block.settings.padding-bottom2}}%;
        padding-left:{{block.settings.padding-left2}}%;
        height:100%;
      }


      .ff-{{block.id}} .three-columns-thumb {
        height: 100%;
        padding: 0px;
      }

      @media screen and (max-width: 749px) {
        .ff-{{block.id}} .three-columns-thumb {
          padding: 50% 0px;
        }                
      }

      .ff-{{block.id}} .im1 {
        background-image: url({{ block.settings.image1 | img_url: '800x' }});
        background-position:{{block.settings.image1hang}};
      }

      {% if block.settings.image1-mobile %}
      @media screen and (max-width: 749px) {
        .ff-{{block.id}} .im1 {
          background-image: url({{ block.settings.image1-mobile | img_url: '800x' }});
          background-position:{{block.settings.image1hang-mobile}};
        }
      }
      {%endif%}

      .ff-{{block.id}} .im2 {
        background-image: url({{ block.settings.image2 | img_url: '800x' }});
        background-position:{{block.settings.image2hang}};
      }

      {% if block.settings.image2-mobile %}
      @media screen and (max-width: 749px) {
        .ff-{{block.id}} .im2 {
          background-image: url({{ block.settings.image2-mobile | img_url: '800x' }});
          background-position:{{block.settings.image2hang-mobile}};
        }
      }
      {%endif%}


      .ff-{{block.id}} {
        gap: {{section.settings.gridspace}}px;
        display: grid;
        height: 100%;
      }

      .ff-{{block.id}}.fifty_fifty_image .fifty-fifty-wrap {
        height:100%; 
      }
    </style>

    {% endcase %}
    {% endfor %}
  </div>
</div>

<style>
  #shopify-section-{{section.id}} {
    background-color:{{section.settings.bgcolor}};
    margin-top:{{section.settings.margin-top}}px;
    margin-bottom:{{section.settings.margin-bottom}}px;
    padding-top:{{section.settings.padding-top}}px;
    padding-bottom:{{section.settings.padding-bottom}}px;
  }


  #shopify-section-{{section.id}} .three-columns-main {
    gap: {{section.settings.gridspace}}px;
  }

  @media screen and (max-width: 749px) {
    #shopify-section-{{section.id}} {
      margin-top:{{section.settings.margin-top-mobile}}px;
      margin-bottom:{{section.settings.margin-bottom-mobile}}px;
      padding-top:{{section.settings.padding-top-mobile}}px;
      padding-bottom:{{section.settings.padding-bottom-mobile}}px;
    }      
  }


</style>


{% schema %}
{
"name": "t:sections.three-column-feature.name",
"tag": "section",
"class": "spaced-section spaced-section--full-width",
"settings": [
{
"type": "checkbox",
"id": "fullwidth",
"label": "t:sections.image-video-banner.settings.fullwidth.label",
"default":true
},
{
"type": "color",
"id": "bgcolor",
"default": "#ffffff",
"label": "t:sections.text-banner.settings.bgcolor.label",
"info": "t:sections.text-banner.settings.bgcolor.info"
},
{
"type": "range",
"id": "gridspace",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Grid Spacing",
"default": 35
},
{
"type": "range",
"id": "margin-top",
"min": -100,
"max": 100,
"step": 5,
"unit": "px",
"label": "Margin-top",
"default": 5
},
{
"type": "range",
"id": "margin-bottom",
"min": -100,
"max": 100,
"step": 5,
"unit": "px",
"label": "Margin-bottom",
"default": 5
},
{
"type": "range",
"id": "padding-top",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Padding-top",
"default": 10
},
{
"type": "range",
"id": "padding-bottom",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Padding-bottom",
"default": 10
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "range",
"id": "margin-top-mobile",
"min": -100,
"max": 100,
"step": 5,
"unit": "px",
"label": "Margin-top",
"default": 5
},
{
"type": "range",
"id": "margin-bottom-mobile",
"min": -100,
"max": 100,
"step": 5,
"unit": "px",
"label": "Margin-bottom",
"default": 5
},
{
"type": "range",
"id": "padding-top-mobile",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Padding-top",
"default": 10
},
{
"type": "range",
"id": "padding-bottom-mobile",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"label": "Padding-bottom",
"default": 10
}
],
"blocks": [	
{
"name": "Full image",
"type": "fullimage",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "image1hang",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "image_picker",
"id": "image-mobile",
"label": "Image"
},
{
"type": "select",
"id": "image1hang-mobile",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "text",
"id": "hover_button_text",
"label": "Hover Button Text",
"default": "Explore MTB armor",
"info": "leave empty if you dont want to show"
},
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},
{
"type": "header",
"content": "Image Offsets"
},
{
"type": "range",
"id": "padding-top",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-top",
"default": 0
},
{
"type": "range",
"id": "padding-right",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-right",
"default": 0
},
{
"type": "range",
"id": "padding-bottom",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-bottom",
"default": 0
},
{
"type": "range",
"id": "padding-left",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-left",
"default": 0
}
]
},
{
"name": "image with copy",
"type": "image_with_copy",
"settings": [
{
"type": "header",
"content": "Image Settings"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "image1hang",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "range",
"id": "height",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Image Height (Vertical Height %)",
"default": 50
},
{
"type": "image_picker",
"id": "image-mobile",
"label": "Image Mobile"
},
{
"type": "select",
"id": "image1hang-mobile",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "range",
"id": "height-mobile",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"label": "Image Height Mobile (Vertical Height %)",
"default": 50
},
{
"type": "header",
"content": "Copy Settings"
},
{
"type": "checkbox",
"id": "copy_position",
"label": "Copy Position After Image",
"default": true
},
{
"type": "select",
"id": "text_align",
"options": [
{
"value": "left",
"label": "t:sections.text-banner.settings.desktop_text_box_align.options__1.label"
},
{
"value": "center",
"label": "t:sections.text-banner.settings.desktop_text_box_align.options__2.label"
},
{
"value": "right",
"label": "t:sections.text-banner.settings.desktop_text_box_align.options__3.label"
}
],
"default": "left",
"label": "t:sections.text-banner.settings.desktop_text_box_align.label"
},
{
"type": "range",
"id": "padding-copy",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Copy Padding Horizontal",
"default": 0
},
{
"type": "range",
"id": "padding-copyh",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Copy Padding Vertical",
"default": 0
},
{
"type": "text",
"id": "heading",
"label": "Title",
"default": "The Freedom to Move"
},
{
"type": "color",
"id": "headcolor",
"default": "#000000",
"label": "Heading Color"
},
{
"type": "range",
"id": "fontsize",
"min": 10,
"max": 60,
"step": 1,
"unit": "px",
"label": "Font Size",
"default": 30
},
{
"type": "range",
"id": "fontsize-mobile",
"min": 10,
"max": 60,
"step": 1,
"unit": "px",
"label": "Font Size Mobile",
"default": 30
},
{
"type": "richtext",
"id": "text",
"label": "Text"
},
{
"type": "color",
"id": "textcolor",
"default": "#000000",
"label": "Copy & Text Links Color"
},
{
"type": "range",
"id": "fontsize-copy",
"min": 10,
"max": 60,
"step": 1,
"unit": "px",
"label": "Font Size Copy",
"default": 14
},
{
"type": "range",
"id": "fontsize-copy-mobile",
"min": 10,
"max": 60,
"step": 1,
"unit": "px",
"label": "Font Size Copy Mobile",
"default": 14
},
{
"type": "header",
"content": "Link Settings"
},
{
"type": "checkbox",
"id": "buttons",
"label": "Make Links into buttons",
"default": false
},
{
"type": "color",
"id": "butt-bgcolor",
"default": "#000000",
"label": "Button Background Color",
"info": "if buttons selected"
},
{
"type": "color",
"id": "butt-textcolor",
"default": "#ffffff",
"label": "Button Text Color",
"info": "if buttons selected"
},
{
"type": "text",
"id": "cta1_text",
"label": "CTA 1 Text"
},
{
"type": "url",
"id": "cta1_link",
"label": "CTA 1 Link"
},
{
"type": "text",
"id": "cta2_text",
"label": "CTA 2 Text"
},
{
"type": "url",
"id": "cta2_link",
"label": "CTA 2 Link"
},
{
"type": "text",
"id": "hover_button_text",
"label": "Image Link Text",
"default": "Explore MTB armor",
"info": "leave empty if you dont want to show"
},
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},
{
"type": "header",
"content": "Image Offsets"
},
{
"type": "range",
"id": "padding-top",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-top",
"default": 0
},
{
"type": "range",
"id": "padding-right",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-right",
"default": 0
},
{
"type": "range",
"id": "padding-bottom",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-bottom",
"default": 0
},
{
"type": "range",
"id": "padding-left",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-left",
"default": 0
}
]
},
{
"name": "50/50 image",
"type": "fifty_fifty_image",
"settings": [
{
"type": "header",
"content": "Image One"
},
{
"type": "image_picker",
"id": "image1",
"label": "Image 1"
},
{
"type": "select",
"id": "image1hang",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "image_picker",
"id": "image1-mobile",
"label": "Image 1 Mobile"
},
{
"type": "select",
"id": "image1hang-mobile",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "text",
"id": "hover_button1_text",
"label": "Hover Button 1 Text",
"default": "Explore MTB armor",
"info": "leave empty if you dont want to show"
},
{
"type": "url",
"id": "image1_link",
"label": "Image 1 Link"
},
{
"type": "header",
"content": "Image Offsets"
},
{
"type": "range",
"id": "padding-top",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-top",
"default": 0
},
{
"type": "range",
"id": "padding-right",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-right",
"default": 0
},
{
"type": "range",
"id": "padding-bottom",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-bottom",
"default": 0
},
{
"type": "range",
"id": "padding-left",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-left",
"default": 0
},
{
"type": "header",
"content": "Image Two"
},
{
"type": "image_picker",
"id": "image2",
"label": "Image 2"
},
{
"type": "select",
"id": "image2hang",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "image_picker",
"id": "image2-mobile",
"label": "Image 2"
},
{
"type": "select",
"id": "image2hang-mobile",
"options": [
{
"value": "left top",
"label": "t:sections.image-video-banner.settings.image1hang.options__1.label"
},
{
"value": "left center",
"label": "t:sections.image-video-banner.settings.image1hang.options__2.label"
},
{
"value": "left bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__3.label"
},
{
"value": "center top",
"label": "t:sections.image-video-banner.settings.image1hang.options__4.label"
},
{
"value": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.options__5.label"
},
{
"value": "center bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__6.label"
},
{
"value": "right top",
"label": "t:sections.image-video-banner.settings.image1hang.options__7.label"
},
{
"value": "right center",
"label": "t:sections.image-video-banner.settings.image1hang.options__8.label"
},
{
"value": "right bottom",
"label": "t:sections.image-video-banner.settings.image1hang.options__9.label"
}
],
"default": "center center",
"label": "t:sections.image-video-banner.settings.image1hang.label",
"info": "t:sections.image-video-banner.settings.image1hang.info"
},
{
"type": "text",
"id": "hover_button2_text",
"label": "Hover Button 2 Text",
"default": "Explore MTB armor",
"info": "leave empty if you dont want to show"
},
{
"type": "url",
"id": "image2_link",
"label": "Image 2 Link"
},
{
"type": "header",
"content": "Image Offsets"
},
{
"type": "range",
"id": "padding-top2",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-top",
"default": 0
},
{
"type": "range",
"id": "padding-right2",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-right",
"default": 0
},
{
"type": "range",
"id": "padding-bottom2",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-bottom",
"default": 0
},
{
"type": "range",
"id": "padding-left2",
"min": 0,
"max": 30,
"step": 1,
"unit": "%",
"label": "Padding-left",
"default": 0
}
]
}
],
"max_blocks": 3,
"presets": [
{
"name": "t:sections.three-column-feature.name"
}
]
}
{% endschema %}