<div class="home_left_text_right_image">
  <div class="page-width">
    <div class="image_with_text_container">
      <div class="left_text">
        <div class="text_container">
          {% if section.settings.logo_img != blank %}
          <img class="lazyload" data-src="{{ section.settings.logo_img | img_url: 'master' }}" alt="" />
          {% else %}
          {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if section.settings.sub_title != blank %}
          <h3 class="sub_title">{{ section.settings.sub_title }}</h3>
          {% endif %}
          {% if section.settings.title != blank %}
          <h2 class="title">{{ section.settings.title }}</h2>
          {% endif %}
          {% if section.settings.short_content != blank %}
          <div class="short_content">
            {{ section.settings.short_content }}
          </div>
          {% endif %}
          {% if section.settings.btn_text != blank %}
          <div class="btn_content">
            <a href="{% if section.settings.btn_url != blank %}{{ section.settings.btn_url }}{% else %}#{% endif %}" class="btn">{{ section.settings.btn_text }}</a>
          </div>
          {% endif %}
        </div>
      </div>
      <div class="right_image">
        {% if section.settings.main_img != blank %}
        <img class="lazyload" data-src="{{ section.settings.main_img | img_url: 'master' }}" alt="">
        {% else %}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  .home_left_text_right_image {
    background: {{ section.settings.background_color }};
  }
  .home_left_text_right_image .image_with_text_container .left_text .text_container .btn_content .btn {
    background: {{ section.settings.btn_bg_color }};
    color: {{ section.settings.btn_text_color }};
  }
  .home_left_text_right_image .image_with_text_container .left_text .text_container .btn_content .btn:hover {
    background: {{ section.settings.btn_bg_hover_color }};
    color: {{ section.settings.btn_text_hover_color }};
  }
</style>


{% schema %}
{
  "name": "Texto esq e Imagem dir",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Cor de fundo",
      "default": "#f7f3e8"
    },
    {
      "type": "header",
      "content": "Conteúdo à esquerda"
    },
    {
      "type": "image_picker",
      "id": "logo_img",
      "label": "Logo"
    },
    {
      "type": "text",
      "id": "sub_title",
      "label": "Subtítulo",
      "default": "PELE LIMPA PARA TODOS"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Título",
      "default": "CUIDADO DE VERDADE PARA A SUA PELE"
    },
    {
      "type": "textarea",
      "id": "short_content",
      "label": "Descrição curta",
      "default": "Nossos produtos estimulam a renovação celular e previnem o envelhecimento. Sua pele sempre limpa e linda!"
    },
    {
      "type": "text",
      "id": "btn_text",
      "label": "Texto do botão",
      "default": "Compre agora"
    },
    {
      "type": "url",
      "id": "btn_url",
      "label": "Link do botão"
    },
    {
      "type": "color",
      "id": "btn_bg_color",
      "label": "Cor de fundo do botão",
      "default": "#f39ac1"
    },
    {
      "type": "color",
      "id": "btn_bg_hover_color",
      "label": "Cor de fundo do botão, ao passar mouse",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "btn_text_color",
      "label": "Cor do texto do botão",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "btn_text_hover_color",
      "label": "Cor do texto do botão, ao passar mouse",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Conteúdo à direita"
    },
    {
      "type": "image_picker",
      "id": "main_img",
      "label": "Imagem principal do lado direito",
      "info": "Tamanho da imagem de upload: 950x530"
    }
  ],
	"presets": [
    {
			"name": "Texto esq e Imagem dir",
			"category": "astron"
		}
	]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
