<div class="h-100 tiles-expand-container tiles-expand-multiple">
  <div class="h-100 row no-gutters">
    <div class="col-12">
      <div class="d-flex h-100 flex-wrap position-relative">
        <div class="tile__expand w-50">
          <div class="tile__expand-front front bg-bleu-pastel top-left">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-vert-cascades">Titre<br />
                1</h3>
              <button class="tile__expand-open text-vert-cascades"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-vert-cascades"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-bleu-profond top-right">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-white">Titre<br />
                2</h3>
              <button class="tile__expand-open heading-medium text-white"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-white"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-bleu-recyclage bottom-left">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-white">Titre<br />
                3</h3>
              <button class="tile__expand-open heading-medium text-white"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-white"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
        <div class="tile__expand w-50">
          <div class="tile__expand-front bg-white bottom-right text-vert-cascades">
            <div class="tile__expand-front-featured">
              <h3 class="heading-medium mb-0 pb-2 text-vert-cascades">Titre<br />
                4</h3>
              <button class="tile__expand-open heading-medium text-vert-cascades"><i class="icon-plus heading-medium">&nbsp;</i></button>
            </div>
            <div class="tile__expand-front-more-info">
              <button class="tile__expand-close text-vert-cascades"><i class="icon-close">&nbsp;</i></button>
              <div class="tile__expand-front-more-info-content  w-100 pt-10 p-lg-10">
                <p class="heading-regular text-vert-cascades py-2">Entête</p>
                <p class="text-xlarge text-vert-cascades py-2 d-none d-lg-block">Texte pour desktop seulement</p>
                <p class="text-xlarge text-vert-cascades pb-2 d-lg-none">Texte pour mobile seulement</p>
                <p><button class="btn btn-outline-primary" type="button">En savoir plus <span class="d-none d-lg-block">texte pour desktop</span></button></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>