<section class="jumbotron jumbotron-fluid bg-transparent d-flex header header-communications text-white">
    <div class="w-100 d-flex" style="background-color: rgba(0,0,0,0.5)">
        <div class="container my-auto">
            <h1 class="display-4">
                {% t communications.header_title %}
            </h1>
            <p class="lead">
                {% t communications.header_lead %}
            </p>
        </div>
    </div>
</section>

<section class="bg-transparent pt-5 pb-5">
    <div class="container text-center text-lg-left">
        <h3 class="text-secondary text-uppercase">{% t communications.mattermost.title %}</h3>
        <p>{% t communications.mattermost.lead %}</p>
    </div>
</section>

<section class="bg-white pt-5 pb-5">
    <div class="container text-center text-lg-left">
        <h3 class="text-secondary text-uppercase">{% t communications.matrix.title %}</h3>
        <p>{% t communications.matrix.lead %}</p>
    </div>
</section>

<section class="bg-transparent pt-5 pb-5">
    <div class="container text-center text-lg-left">
        <h3 class="text-secondary text-uppercase">{% t communications.nextcloud.title %}</h3>
        <p>{% t communications.nextcloud.lead %}</p>
    </div>
</section>

<section class="bg-white text-center pt-5 pb-5">
    {% include contacts.html %}
</section>