Paywall: Default

<div class="c-paywall {% if layout %}c-paywall--{{layout}}{% endif %}" data-context="{{page}}">

  {% if page =='item' %}
    <div class="c-paywall__intro">{{intro}}</div>
  {% endif %}

  {% if page !='landing' %}
  <div class="c-paywall__title">{{ title }} {{ contents.nomeTestata }}</div>
  {% endif %}
  
  <div class="c-paywall__body {% if (page =='landing') or (page =='item') %}c-paywall__body_row{% endif %} {% if page =='landing' %}u-p-none{% endif %}">
    <div class="c-paywall__promos">
      {% for item in products %}
      <div class="c-paywall__infos-box">
        <div class="c-paywall__promo">
            <!-- -->
            {% if (item.label =='annuale') and (products.length > 1) %}
              <div class="c-paywall__recommended">{{ contents.bestChoice }}</div>
            {% endif %}

            <div class="c-paywall__offer">
              <span>{{ contents.offer }} {{ item.label }}</span>
            </div>
            
            {% if subtitle %}
            <h2 class="c-paywall__price">{{ subtitle }}</h2>
            {% else %}
            <h2 class="c-paywall__price">
                <strong>{{ item.final_price }}</strong><span class="c-paywall__value">€</span>
                {% if item.list_price %}  
                <div><span>{{ contents.instead }}</span> <span class="line-through">{{ item.list_price}}€</span></div> 
                <div class="u-label-03">(<span>{{ contents.saving }}</span><span>{{ item.discount_percentage}}%</span>)</div> 
                {% endif %}
            </h2>
            {% endif %}
            {% if not cta_standalone %}
              <div class="c-paywall__cta">
                {% render "@button--approfondimento", {label:cta_label}, true %}
              </div>
            {% endif %}
            <!-- -->
        </div>
      </div>
      {% endfor %}
      <span class="c-paywall__info">
        {{ info_label }} 
      </span>
    </div>
    <div class="c-paywall__advantages">
      <div class="c-paywall__details">
        <div class="c-paywall__advantages-box">
          <h6 class="c-paywall__advantages-title">{{advantages.title}}</h6>
          <ul class="c-paywall__advantages-list">
            {% for adv in advantages.list %}
            <li class="c-paywall__advantages-item">
              {{ adv }}
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      <div class="c-paywall__container-img">
        <!-- end svg -->
        <svg class="c-paywall__img" xmlns="http://www.w3.org/2000/svg" width="0%" height="0%" viewBox="0 0 250 174" fill="none">
          <g fill="currentColor" clip-path="url(#a)">
            <path d="M250 35c0-7.3-5.3-12.6-12.6-12.6h-15.7V12.1c0-1.4 0-2.8-.2-4.1-1-5-5.2-8-10.7-8H38.3a10 10 0 0 0-9.4 6.4c-.5 1.6-.7 3.4-.7 5v132H0v10.8c0 .6.1 1 .3 1.6 1.1 3.6 4 5.7 8.2 5.7h104.3v.6a12 12 0 0 0 12.3 11.5h34c4 0 7.3-1.6 9.7-4.8.7-1 1.4-1.2 2.6-1.2h66.1c7.2 0 12.5-5.3 12.5-12.4V34.9Zm-12.3-8.5c4 0 7.3 2.5 8 6.5.4 1.8.1 3.6.1 5.5H145c.2-2 0-4 .4-6 .8-3.6 4-6 7.7-6h84.6ZM38.3 4.1H211c3 0 5.1 1 6.3 3.7.3.6.4 1.4.6 2.3H32.3c0-3.5 2.6-6 6-6Zm74.5 153.4H8.9c-3.5 0-5-1.5-5-5v-5h108.9v10Zm.1-76.5v62.3H32.3v-129h185.3v8.1h-63.9c-7.4 0-12.6 5.3-12.6 12.7v39.7H119a6 6 0 0 0-6.1 6.2Zm54.1 82.3c-.3 3.5-3.8 6.2-7.3 6.3h-35.3c-3.5 0-7-3-7.3-6.4-.3-3.8 0-7.7 0-11.7h50c0 4 .3 8 0 11.8Zm.2-16-1.3.1h-47.6c-1.1 0-1.5-.2-1.5-1.4V91h50.5v56.2Zm.1-60.4H117v-6.4c.2-1.2 1.2-1.6 2.4-1.6h45.3c2 0 2.7.6 2.7 2.8v5.2Zm4-5c0-4.6-3-7.2-7.1-7.1-5.8.1-11.6 0-17.4 0h-1.6V42.7h100.6v96.6h-74.5V81.9Zm74.6 69.9c0 1.9 0 3.9-.3 5.7-.7 3.6-4 6-7.6 6h-66.7v-20H246v8.3Z"/>
            <path d="M195.6 145.5a7 7 0 0 0-.3 14c4 0 7.2-3 7.3-6.8 0-4-3-7.2-7-7.2Zm0 10a3.1 3.1 0 0 1-3.1-3 3 3 0 1 1 6 0 3.1 3.1 0 0 1-3 3Zm0-127a4 4 0 0 0-4.1 4 4 4 0 0 0 4 4 4 4 0 0 0 3-6.8 4 4 0 0 0-2.9-1.2Zm-53.6 126a6 6 0 0 0-6 6.1 6 6 0 0 0 6.2 6 6 6 0 0 0 5.9-6 6 6 0 0 0-6-6Zm0 8a2 2 0 0 1-2-1.9c0-1 1-2 2-2 1-.1 2.1.9 2.1 2a2.1 2.1 0 0 1-2 2Zm7-81.5h-13.8c-1.4 0-2.2.8-2.2 2s.9 1.9 2.3 1.9h13.6c1.4 0 2.2-.8 2.2-2 0-1.1-.7-2-2.1-2Z"/>
          </g>
          <defs>
            <clipPath >
              <path fill="currentColor" d="M0 0h250v173.7H0z"/>
            </clipPath>
          </defs>
        </svg>
        <!-- end svg -->
      </div>
    </div>
  </div>
  {% if cta_standalone %}
  <div class="c-paywall__cta">
    {% render "@button--approfondimento", {label:cta_label}, true %}
  </div>
  {% endif %}
  <div class="c-paywall__footer">
    {{login_text}}
    <a href="">{{contents.login_label}}</a>
  </div>
</div>