{# ========================================================================= #}
{# :: IMPORTS #}
{# ========================================================================= #}
{# Atoms #}
{% import "atoms/button/button-macros.njk" as button %}

{# Molecules #}
{% import "molecules/cta/cta-macros.njk" as cta %}

{# ========================================================================= #}
{# :: Section #}
{# ========================================================================= #}
<section class="m-section m-section--center">
  <div class="m-section__container l-container">
    <header class="m-section__header">
      <h2>Batterijen die gevaarlijk kunnen zijn om in te zamelen</h2>
    </header>

    <div class="m-section__content">
      <p class="m-section__content-item">
        Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla.
      </p>

      <div class="m-cta m-section__content-item p-batteripedia__danger-cta">
        <div class="m-cta__image-container">
          <img class="m-cta__image" src="/assets/images/batteripedia/Lekkende-batterij.png" alt="lekkende-batterij" title="lekkende-batterij" />
        </div>
        <div class="m-cta__content">
          <h2 class="m-cta__content__title">Lekkende batterij</h2>
          <p class="m-cta__content__text">Ik kom in alle mogelijke vormen en maten. Mij steek je best direct apart in een
          plastic zakje alvorens mij in de Bebat ton te gooien. Vermijd het contact met handen en huid.</p>

          {{button.default("m-cta__content__button", {
            text: "Veiligheid bij inzamelen",
            icon: {before: "icon-arrow-right"}
          })}}
        </div>
      </div>

      <div class="m-section__content-item l-grid l-grid--with-margins o-steps p-batteripedia__steps">
        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal m-step--no-padding-bottom">
          <h3 class="m-step__title">Naakte cel en naakte pack</h3>
          <p class="m-step__text">Wij zijn een naakte cel en een naakte pack en zoals onze naam al
          aangeeft hebben wij geen jasje aan en staan wij in ons blootje. Ons mag je niet inzamelen
          op school omdat wij industriële batterijen zijn.</p>
          <img class="p-batteripedia__danger-ill1" src="/assets/images/batteripedia/Naaktecel.png" alt="Naaktecel" title="Naaktecel" />
        </article>

        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal m-step--no-padding-bottom">
          <h3 class="m-step__title">Autobatterij</h3>
          <p class="m-step__text">Ik ben een reus van een batterij en zit in een auto.
          Ik hoor zeker niet thuis in de Bebat ton op school.
          Mij breng je best naar het containerpark.</p>
          <img class="p-batteripedia__danger-ill2" src="/assets/images/batteripedia/Autobatt.png" alt="Autobatt" title="Autobatt" />
        </article>

        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal">
          <img class="p-batteripedia__danger-ill3" src="/assets/images/batteripedia/Modelbouw.png" alt="Modelbouw" title="Modelbouw" />
          <h3 class="m-step__title">Batterij uit een modelbouwtoestel</h3>
          <p class="m-step__text">Knutsel je graag modelbouw vliegsimulators in elkaar?
          Ik ben de batterij die ervoor zorgt dat je vliegtuigje voldoende energie krijgt.
          Je mag mij in beperkte mate binnenbrengen op school. Is mijn buikje helemaal rond en
          ben ik opgezwollen? Dan ben ik waarschijnlijk beschadigd en hoor ik zeker niet thuis
          in de ton op school.</p>
        </article>

        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal">
          <img class="p-batteripedia__danger-ill4" src="/assets/images/batteripedia/BatterijPack.png" alt="BatterijPack" title="BatterijPack" />
          <h3 class="m-step__title">Batterijpack</h3>
          <p class="m-step__text">Alleen als ik volledig aangekleed ben en mijn jasje nergens beschadigd is,
          mag je mij inzamelen op school. Breng mij enkel van thuis mee en zamel mij in kleine hoeveelheden in op school.
          Is mijn jasje toch beschadigd of ben ik volledig naakt? Breng mij dan binnen op het containerpark</p>
        </article>

        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal m-step--no-padding-bottom">
          <h3 class="m-step__title">Tractiebatterij</h3>
          <p class="m-step__text">Mij vind je terug in elektrische voer- en vaartuigen zoals vorkheftrucks, palletwagens of veegmachines.
          Mij mag je niet inzamelen op school en laat je best ophalen door een professional.</p>
          <img class="p-batteripedia__danger-ill5" src="/assets/images/batteripedia/Tractiebatt.png" alt="Tractiebatt" title="Tractiebatt" />
        </article>

        <article class="l-grid__col-4-12 m-step m-step--standalone js-reveal">
          <img class="p-batteripedia__danger-ill6" src="/assets/images/batteripedia/Fietsbatterij.png" alt="Fietsbatterij" title="Fietsbatterij" />
          <h3 class="m-step__title">Batterij van een elektrische fiets</h3>
          <p class="m-step__text">Ik bezorgde jou of je ouders heel wat leuke ritjes. Wanneer ik versleten ben en niet meer goed oplaad,
          breng je mij terug naar de fietshandelaar of naar het containerpark. Ik hoor niet thuis in de Bebat ton op school omdat ik
          een extra krachtige Lithium batterij ben.</p>
        </article>
      </div>
    </div>
  </div>
</section>