Tera variables in style properties are shown as an error.

[persello]

{% macro hero(hero_section) %}
<div class="macro-hero" style="background-image: url({{ hero_section.wallpaper | default(value="") }})">
    <div class="hero-content">
        <h4>{{ hero_section.intro }}</h4>
        <h1>{{ hero_section.title }}</h1>
        <p>{{ hero_section.description }}</p>

        {% if hero_section.buttons %}
        <div class="hero-buttons">
            {% for button in hero_section.buttons %}

            {% if button.primary %}
            <a class="button primary" href="{{ button.url }}">{{ button.text }}</a>
            {% else %}
            <a class="button" href="{{ button.url }}">{{ button.text }}</a>
            {% endif %}

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

    </div>

    {% if hero_section.social_links %}
    <nav class="hero-social">
        {% for social in hero_section.social_links %}
        <a href="{{ social.url }}"><img src="{{ social.icon }}" alt="{{ social.name }}"></a>
        {% endfor %}
    </nav>
    {% endif %}
</div>
{% endmacro %}

The contents of the style property at line 2 is shown as an error, as shown in the image below.

[karuna]

That's weird, it's not CSS.

On Wed, Feb 8, 2023 at 6:37 PM Riccardo Persello @.***> wrote:

{% macro hero(hero_section) %} <div class="macro-hero" style="background-image: url({{ hero_section.wallpaper | default(value="") }})">

<div class="hero-content">

    <h4>{{ hero_section.intro }}</h4>

    <h1>{{ hero_section.title }}</h1>

    <p>{{ hero_section.description }}</p>

    {% if hero_section.buttons %}

    <div class="hero-buttons">

        {% for button in hero_section.buttons %}

        {% if button.primary %}

        <a class="button primary" href="{{ button.url }}">{{ button.text }}</a>

        {% else %}

        <a class="button" href="{{ button.url }}">{{ button.text }}</a>

        {% endif %}

        {% endfor %}

    </div>

    {% endif %}

</div>

{% if hero_section.social_links %}

<nav class="hero-social">

    {% for social in hero_section.social_links %}

    <a href="{{ social.url }}"><img src="{{ social.icon }}" alt="{{ social.name }}"></a>

    {% endfor %}

</nav>

{% endif %}