Focus: Channels Cover

<section class="o-bg-dark u-mb-medium" role="complementary" data-items-count="4" data-section-key="focus-channel-cover">
    <div class="o-container u-p-small u-p-medium@lg">
        <div class="u-none u-block@md">
            <h3 class="c-title c-title--multiline u-relative">

                Le nostre guide

            </h3>
        </div>

        <div class="l-grid l-grid--scrollable">

            <div class="l-grid__item">
                <article class="c-story  c-story--overlay " data-channel="/lifestyle/">
                    <h3 class="c-title c-title--featured u-relative">

                        Sicurezza

                    </h3>
                    <a class="o-link-inverse u-relative u-size-full u-block" href="#">

                        <div class="c-story__media">

                            <figure class="o-skeleton o-skeleton-media--vertical u-relative">
                                <img decoding="async" referrerpolicy="no-referrer" class="u-absolute u-top u-size-full" src="https://unsplash.it/450/600?random" loading="lazy" alt="Coronavirus: trucchi e consigli per pulire e disinfettare il condizionatore">

                            </figure>
                        </div>

                        <header class="c-story__header u-size-full u-px-base u-absolute u-bottom u-gradient u-z-cover">
                            <span class="c-story__kicker u-label-02 u-mb-xsmall u-inline-block u-p-xxsmall">Sicurezza</span>
                            <h1 class="c-story__heading u-mb-small u-mt-none">Coronavirus: trucchi e consigli per pulire e disinfettare il condizionatore</h1>
                        </header>
                    </a>
                </article>
            </div>

            <div class="l-grid__item">
                <article class="c-story  c-story--overlay " data-channel="/cultura/">
                    <h3 class="c-title c-title--featured u-relative">

                        Digital life

                    </h3>
                    <a class="o-link-inverse u-relative u-size-full u-block" href="#">

                        <div class="c-story__media">

                            <figure class="o-skeleton o-skeleton-media--vertical u-relative">
                                <img decoding="async" referrerpolicy="no-referrer" class="u-absolute u-top u-size-full" src="https://unsplash.it/450/600?random" loading="lazy" alt="Evitare code e assembramenti, nasce &quot;Prenotaunposto&quot; la web app per prenotare in sicurezza">

                            </figure>
                        </div>

                        <header class="c-story__header u-size-full u-px-base u-absolute u-bottom u-gradient u-z-cover">
                            <span class="c-story__kicker u-label-02 u-mb-xsmall u-inline-block u-p-xxsmall">Digital life</span>
                            <h1 class="c-story__heading u-mb-small u-mt-none">Evitare code e assembramenti, nasce &quot;Prenotaunposto&quot; la web app per prenotare in sicurezza</h1>
                        </header>
                    </a>
                </article>
            </div>

            <div class="l-grid__item">
                <article class="c-story  c-story--overlay " data-channel="/cultura/">
                    <h3 class="c-title c-title--featured u-relative">

                        Corsi

                    </h3>
                    <a class="o-link-inverse u-relative u-size-full u-block" href="#">

                        <div class="c-story__media">

                            <figure class="o-skeleton o-skeleton-media--vertical u-relative">
                                <img decoding="async" referrerpolicy="no-referrer" class="u-absolute u-top u-size-full" src="https://unsplash.it/450/600?random" loading="lazy" alt="Come diventare interior designer">

                            </figure>
                        </div>

                        <header class="c-story__header u-size-full u-px-base u-absolute u-bottom u-gradient u-z-cover">
                            <span class="c-story__kicker u-label-02 u-mb-xsmall u-inline-block u-p-xxsmall">Corsi</span>
                            <h1 class="c-story__heading u-mb-small u-mt-none">Come diventare interior designer</h1>
                        </header>
                    </a>
                </article>
            </div>

            <div class="l-grid__item">
                <article class="c-story  c-story--overlay " data-channel="/lifestyle/">
                    <h3 class="c-title c-title--featured u-relative">

                        Salute

                    </h3>
                    <a class="o-link-inverse u-relative u-size-full u-block" href="#">

                        <div class="c-story__media">

                            <figure class="o-skeleton o-skeleton-media--vertical u-relative">
                                <img decoding="async" referrerpolicy="no-referrer" class="u-absolute u-top u-size-full" src="https://unsplash.it/450/600?random" loading="lazy" alt="Coppetta mestruale: cos&#39;è, come si usa e come scegliere la più adatta">

                            </figure>
                        </div>

                        <header class="c-story__header u-size-full u-px-base u-absolute u-bottom u-gradient u-z-cover">
                            <span class="c-story__kicker u-label-02 u-mb-xsmall u-inline-block u-p-xxsmall">Salute</span>
                            <h1 class="c-story__heading u-mb-small u-mt-none">Coppetta mestruale: cos&#39;è, come si usa e come scegliere la più adatta</h1>
                        </header>
                    </a>
                </article>
            </div>

        </div>
    </div>
</section>