<section class="single-news {{content.background}}" data-brand-header>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-offset-1 large-10">
{% set parent = sulu_content_load_parent(uuid, {'title': 'title', 'url': 'url'}) %}
<div class="eyebrow">
<div class="out" data-css-animation='out-in' style="--delay: .2s">
<div class="in">
<p>{{parent.content.title}}</p>
</div>
</div>
</div>
<div class="title single-news__title" data-css-animation="fade-in-up" style="--delay: .4s">
<h2>{{ content.title }}</h2>
</div>
<div class="single-news__info grid-x align-justify align-middle">
<div class="cell shrink">
<div class="out" data-css-animation='out-in' style="--delay: .6s">
<div class="in">
<time>{{ created|date("d F y") }}</time>
</div>
</div>
</div>
<div class="cell shrink">
<div class="out" data-css-animation='out-in' style="--delay: .8s">
<div class="in">
{% include 'elements/socialShared.html.twig' with {
'icons': content.socialLink,
'width': 24,
'height': 24,
} %}
</div>
</div>
</div>
</div>
<div class="single-news__image" data-css-animation="bg-image">
<img data-src="{{ content.image.url }}" data-srcset="{{ content.image.url }} 2x" alt data-lazy-image>
</div>
</div>
<div class="cell large-offset-2 large-8 xlarge-7 editable" data-css-animation="text">
{{ content.content|raw }}
</div>
</div>
</div>
</section>