:root{
    --pourcent: 0%;
}
/*
 * ──────────────────────────────────────────────────────────────────────── I ──────────
 *   :::::: I M A G E   C S S   S I Z I N G : :  :   :    :     :        :          :
 * ──────────────────────────────────────────────────────────────────────────────────
 */

 .img{
    position: relative;
 }

 .img.img-128-128,
 .img.img-128-128 img{
    max-width:128px;
    max-height:128px;
  }

 /*
  * ──────────────────────────────────────────────────────────────────────── II ──────────
  *   :::::: I M A G E   C S S   B O R D E R : :  :   :    :     :        :          :
  * ──────────────────────────────────────────────────────────────────────────────────
  */

 .img-border-rounded{
    border-radius: 0.375em;
 }

 img {
    display: block;
    width: auto;
    height: auto;
 }

/*
 * ────────────────────────────────────────────────────────────────────────────── III ──────────
 *   :::::: I M A G E   C S S   A N I M A T I O N : :  :   :    :     :        :          :
 * ────────────────────────────────────────────────────────────────────────────────────────
 */

 .width0 > div{
     width: 0;
 }

 .width100p > div{
    width: 100%;
 }

 .rtl.sliding-div > div{
    left: 0;
    position: absolute;
    background-color: white;
    transition: width 0.6s ease-out;
 }

 .ltr.sliding-div > div{
    right: 0;
    position: absolute;
    background-color: white;
    transition: width 0.6s ease-out;
 }

 /*
  * ─── LEFT TO RIGHT TRANSITION 1 ─────────────────────────────────────────────────
  */

  .sliding-div div:nth-last-child(1),
  .sliding-div div:nth-last-child(1) ~ div {
    height: 100%;
    --pourcent: 100%;
  }

  .sliding-div div:nth-last-child(2),
  .sliding-div div:nth-last-child(2) ~ div{
    height: 50%;
    --pourcent: 50%;
  }

  .sliding-div div:nth-last-child(3),
  .sliding-div div:nth-last-child(3) ~ div{
    height: 33.334%;
    --pourcent: 33.334%;
  }

  .sliding-div div:nth-last-child(4),
  .sliding-div div:nth-last-child(4) ~ div{
    height: 25%;
    --pourcent: 25%;
  }

  .sliding-div div:nth-last-child(5),
  .sliding-div div:nth-last-child(5) ~ div{
    height: 20%;
    --pourcent: 20%;
  }

 /* .sliding-div div:nth-child(0){
      top: calc(-1 * var(--pourcent));
      transition-delay: 0s;
  }*/

  .sliding-div div:nth-child(1){
    top: 0;
    transition-delay: 0.2s;
  }

  .sliding-div div:nth-child(2){
    top: calc(1 * var(--pourcent));
    transition-delay: 0.4s;
  }

  .sliding-div div:nth-child(3){
    top: calc(2 * var(--pourcent));
    transition-delay: 0.6s;
  }

  .sliding-div div:nth-child(4){
    top: calc(3 * var(--pourcent));
    transition-delay: 0.8s;
  }

  .sliding-div div:nth-child(5){
    top: calc(4 * var(--pourcent));
    transition-delay: 1.0s;
  }