<mjml>
  <mj-body background-color="#d6dde5">
    <mj-section padding-bottom="20px" padding-top="20">
      <mj-column width="66.66666666666666%" vertical-align="middle">
        <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0"><span style="font-size: 11px">{subject}</span></mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="middle">
        <mj-text align="right" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0"><span style="font-size: 11px"><a href="https://mjml.io" style="text-decoration: none; color: inherit;">{webview_text}</a></span></mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding-bottom="20px" padding-top="20">
      <mj-column width="100%" vertical-align="top">
        <mj-image href="https://mjml.io" src="{{ getAssetUrl('themes/'~template~'/assets/logo.jpg', null, null, true) }}" alt="Paprika logo" align="center" border="none" width="400px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="top">
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">YELLOW PEPPER
           </mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="top">
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">RED PEPPER
           </mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="top">
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">GREEN PEPPER
           </mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#ffffff" padding-bottom="10px" padding-top="10">
      <mj-column width="100%" vertical-align="top">
      <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/amazing_paprika.jpg', null, null, true) }}" alt="Amazing Paprikas" align="center" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
        <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="20">
          <p><span style="color: green;font-weight: bold;font-size: 24px;">LOREM IPSUM DOLOR</span></p>
          <p><span style="color: green;font-size: 16px;line-height: 1.5;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br/><br/>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies</span></p>
        </mj-text>
      </mj-column>
            <mj-section>
      <mj-column>
        <mj-divider border-width="3px" border-style="solid" border-color="red" />
      </mj-column>
    </mj-section>
      <mj-section>
        <mj-column width="33.33333333333333%" vertical-align="top">
          <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/p_red.png', null, null, true) }}" alt="Red Pepper" align="center" border="none" width="180px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">Lorem impsum dolor
           </mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/p_yellow.png', null, null, true) }}" alt="Yellow Pepper" align="center" border="none" width="180px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="14px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">Lorem impsum dolor
           </mj-text>
      </mj-column>
      <mj-column width="33.33333333333333%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/p_green.png', null, null, true) }}" alt="Green Pepper" align="center" border="none" width="180px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">Lorem impsum dolor
           </mj-text>
      </mj-column>
      </mj-section>
      <mj-section>
        <mj-column width="50%" vertical-align="top">
        <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/paprikas.jpg', null, null, true) }}" alt="Paprikas" align="center" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
          </mj-column>
        <mj-column width="50%" vertical-align="top">
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="22px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">Lorem impsum dolor
           </mj-text>
           <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="14px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
           </mj-text>
          <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="14px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10"><a href="#">Lorem impsum dolor</a>
           </mj-text>
        </mj-column>
      </mj-section>
          <mj-section>
        <mj-column width="50%" vertical-align="top">
        <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="22px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10" font-weight="bold">Lorem impsum dolor
           </mj-text>
                  <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="14px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
           </mj-text>
          <mj-text align="center" color="green" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="14px" padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10"><a href="#">Lorem impsum dolor</a>
           </mj-text>
            </mj-column>mj-column>
          <mj-column width="50%" vertical-align="top">
          <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/paprikas.jpg', null, null, true) }}" alt="More Paprikas" align="center" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0">
            </mj-image>
        </mj-column>
      </mj-section>
      <mj-section>
      <mj-column>
        <mj-divider border-width="3px" border-style="solid" border-color="red" />
      </mj-column>
    </mj-section>
      <mj-section background-color="#ffffff" padding-bottom="10px" padding-top="10">
      <mj-column width="100%" vertical-align="top">

        <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="20">
          <p><span style="color: green;font-weight: bold;font-size: 24px;">LOREM IPSUM DOLOR</span></p>
          <p><span style="color: green;font-size: 16px;line-height: 1.5;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</span></p>
        </mj-text>
                <mj-button background-color="green" color="#FFFFFF" font-size="13px" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="3px" href="https://mjml.io" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif"
          padding-left="25px" padding-right="25px" padding-bottom="10px" padding-top="10">LEARN MORE</mj-button>
      </mj-column>
      </mj-section>
    <mj-section background-color="#ffffff" padding-bottom="10px" padding-top="10">
      <mj-column width="100%" vertical-align="top">
      <mj-image src="{{ getAssetUrl('themes/'~template~'/assets/green_paprikas.png', null, null, true) }}" alt="More Green Paprikas" align="center" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
    <mj-section background-color="#ffffff" padding-bottom="0px" padding-top="0">
      <mj-column width="100%" vertical-align="top">
        <mj-social padding-top="20px">
          <mj-social-element name="facebook" href="[[SHORT_PERMALINK]]"> </mj-social-element>
          <mj-social-element name="twitter" href="[[SHORT_PERMALINK]]"> </mj-social-element>
          <mj-social-element name="google" href="[[SHORT_PERMALINK]]"> </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="20px" padding-top="20">
      <mj-column width="100%" vertical-align="middle">
        <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0">
          <p style="font-size:11px">Spicy Company 11111 EU Planet Earth</p>
        </mj-text>
        <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="11px" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="0">
          <p style="font-size:11px">{unsubscribe_text}</p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>