grav-theme-libretic/templates/modular/portfolio.html.twig

<div class="modular-row portfolio">
    {{ content|raw }}
    {% if page.header.portfolio %}
        <div class="notebooks">
            {% for row in page.header.portfolio|batch(3) %}
                <div class="notebook-row">
                    {% for portfolio in row %}
                        <div class="notebook">
                            <div class="desc">
                                <h4>{{ portfolio.title }}</h4>
                                {% if portfolio.url is defined %}
                                    <p><a href="{{ portfolio.url }}">{{ portfolio.url }}</a><br>
                                {% endif %}
                                {{ portfolio.desc|raw }}</p>
                            </div>
                            {% if portfolio.details_url is defined %}
                                <a href="{{ portfolio.details_url }}" class="portfolio-link"">
                                    <div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div><div class="screen-content-hover"><i class="fa-solid fa-arrow-up-right-from-square"></i> Détails</div></div>
                                </a>
                            {% else %}
                                <div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div></div>
                            {% endif %}
                            <div class='keyboard'></div>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>