<section class="section-posts py-20 lg:py-[170px]">

  <div class="posts-list reverse">
    <div class="container flex flex-col  gap-20  lg:gap-[170px]">
      <!-- //  CLASS : TL BL TR BL ORANGE BLUE h-sm - h-md -h-lg  v-sm v-md  v-lg -->
      <div class="card-post relative  flex flex-wrap bl orange h-md v-sm">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation1.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Comment s’étendre sans se répandre ? La juste mesure</h2>
          <p class="card-text">Réhabilitation du parc et extension de la Villa Cohendier · Saint-Pierre-en-Faucigny, Haute-Savoie</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <!-- //  CLASS : TL BL TR BL ORANGE BLUE sm - md -lg -->
      <div class="card-post relative  flex flex-wrap tr blue v-sm h-sm">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation2.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Comment repenser le rôle des cours d'école ?</h2>
          <p class="card-text">Groupe scolaire d'Orliénas · Rhône</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <!-- //  CLASS : TL BL TR BL ORANGE BLUE sm - md -lg -->
      <div class="card-post relative  flex flex-wrap br orange h-sm v-md">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation3.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Quelle est la question ?</h2>
          <p class="card-text">Parc du Vallon des Pierres Rouges · Marcy l'Etoile, Rhône</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <!-- //  CLASS : TL BL TR BL ORANGE BLUE sm - md -lg -->
      <div class="card-post relative  flex flex-wrap tl blue h-lg v-md">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation4.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Quelle est la question ?</h2>
          <p class="card-text">Belvédère des Bondons · Les Bondons, Lozère</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>

      <div class="card-post relative  flex flex-wrap card-has-bg green">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation5.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Comment valoriser et réactiver un parc ?</h2>
          <p class="card-text">Espaces d'observation nichés au cœur des étangs de la Bouvaque · Abbeville, Somme</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <div class="card-post relative  flex flex-wrap card-has-bg green">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation5.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Comment valoriser et réactiver un parc ?</h2>
          <p class="card-text">Espaces d'observation nichés au cœur des étangs de la Bouvaque · Abbeville, Somme</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <div class="card-post relative  flex flex-wrap tr orange  h-sm v-sm">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation6.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Quelle est la question ?</h2>
          <p class="card-text">Parc des hérissons · Ornex, Ain</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>
      <div class="card-post relative  flex flex-wrap br blue  h-sm v-sm">
        <div class="card-img">
          <img src="<?php echo get_stylesheet_directory_uri() ?>/datas/realisation7.jpg" alt="">
        </div>
        <div class="card-body relative ">
          <h2 class="card-title">Quelle est la question ?</h2>
          <p class="card-text">Parc des hérissons · Ornex, Ain</p>
          <a href="#" class="btn-primary stretched-link">
            <span><?php echo lnj_load_inline_svg('circle-left.svg'); ?></span>
            <span>Découvrir</span>
            <span><?php echo lnj_load_inline_svg('plus.svg'); ?></span>
          </a>
        </div>
      </div>

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