{% load wagtailcore_tags wagtailimages_tags %}

{% load static %}

{% if self.background_image %}
{% image self.background_image original format-webp preserve-svg as bg_image %}
<div class="wrapper-grid-feature {% if self.image_position == 'right' %}image-right{% else %}image-left{% endif %}">
   {% if self.image_position == 'left' %}
       <!-- Layout: Imagem à esquerda, texto à direita -->
       <div class="image-bg" style="background-image: url({{bg_image.url}})">
       </div>
       <div class="feature-text" style="background-color:#024248;">
           <h2 class="h2-feature">{{ self.title }}</h2>
           <div class="p-feature" style="color: white;">{{ self.description|richtext }}</div>
       </div>
   {% else %}
       <!-- Layout: Texto à esquerda, imagem à direita -->
       <div class="feature-text" style="background-color:#024248;">
           <h2 class="h2-feature">{{ self.title }}</h2>
           <div class="p-feature" style="color: white;">{{ self.description|richtext }}</div>
       </div>
       <div class="image-bg" style="background-image: url({{bg_image.url}})">
       </div>
   {% endif %}
</div>
{% endif%}