figureslibres.cc/user/themes/figureslibres/scss/theme/_mobile.scss

@media screen and (max-width: 414px) {
  body{
    #start{
      width: $Wi-m;
      #text_figli{
        #item_list{
          .card{
            width: $Wi-m;
            #item{
              width: calc(100% + (.5rem * 3));
            }
          }
        }
      }
    }
  }


  // typographie
  header{
    a{
      font-size: $txt-figli-m;
      line-height: $Flhome-m;
    }
  }
  .home{
    p{
      font-size: $txt-figli-m!important;
      line-height: $Flhome-m!important;
    }
  }
  .other_projets{
    h3{
      font-size: $txt-figli-m;
    }
  }

  // mep
  header{
    width: calc( #{$Wi-m} - (#{$marg} * 2) );
  }

  body{
    #start{
        width: calc( #{$Wi-m} - (#{$marg} * 2) );
    }
    &:not(.home){
      #start{
        margin-top: $Flhome;
      }
    }
    .sidebar-right{
      display: none;
    }
  }

  #item_list{
    .card{
      width: calc( #{$Wi-m}  )!important;
      &:nth-child(odd){
        margin-right: 0;
      }
      .card-header{
        margin-bottom: $marg;
        & > * {
          margin-right: $marg;
        }
      }
    }
  }

  .other_projets{
    margin-top: $margI;
    .card{
      width: $Wi-m;
      &:nth-child(-1n+3){
        margin-right: 0;
      }
    }
  }
}

@media screen and (max-width: 768px)  and (orientation: portrait) {

  body{
    #start{
      width: $Wi80-m;
      #text_figli{
        #item_list{
          .card{
            width: $Wi33-m;
            #item{
              width: calc(300% + (.5rem * 3));
            }
          }
        }
      }
    }
  }

  // typographie
  header{
    a{
      font-size: 2.5rem;
      line-height: 3rem;
    }
  }
  // .home{
  //   p{
  //     font-size: $txt-figli-t!important;
  //     line-height: $Flhome-t!important;
  //   }
  // }
  .other_projets{
    h3{
      font-size: $txt-figli-t;
    }
  }

  body{
    &:not(.home){
      #start{
        margin-top: 5rem;
      }
    }
  }

  #item_list{
    .card{
      width: calc( #{$Wi-m}  );
      &:nth-child(odd){
        margin-right: 0;
      }
      .card-header{
        margin-bottom: $marg;
        & > * {
          margin-right: $marg;
        }
      }
    }
  }
}

@media screen and (max-width: 812px) and (orientation: landscape) {
  // typographie
  header{
    a{
      font-size: $txt-figli-m;
      line-height: $Flhome-m;
    }
  }
  .home{
    p{
      font-size: $txt-figli-m!important;
      line-height: $Flhome-m!important;
    }
  }
  .other_projets{
    h3{
      font-size: $txt-figli-m;
    }
  }

  // mep
  header{
    width: calc( #{$Wi-m} - (#{$marg} * 2) );
  }

  body{
    #start{
        width: calc( #{$Wi-m} - (#{$marg} * 2) );
    }
    &:not(.home){
      #start{
        margin-top: $Flhome;
      }
    }
    .sidebar-right{
      display: none;
    }
  }

  #item_list{
    .card{
      width: $Wi50;
      &:nth-child(odd){
        margin-right: $margI;
      }
    }
  }

  .other_projets{
    .card{
      width: $Wi33;
      &:nth-child(-1n+3){
        margin-right: $marg;
      }
    }
  }
}

@media screen and (max-width: 910px) and (orientation: portrait) {
  header{
    a{
      font-size: 2.5rem;
      line-height: 3rem;
    }
  }
  .home{
    p{
      font-size: $txt-figli-t!important;
      line-height: $Flhome-t!important;
    }
  }
  .other_projets{
    h3{
      font-size: $txt-figli-t;
    }
  }
  body{
    &:not(.home){
      #start{
        margin-top: 5rem;
      }
    }
  }
}

@media screen and (max-width: 660px) {
  header{
    a{
      font-size: $txt-figli-m;
      line-height: $Flhome-m;
    }
  }
  .home{
    p{
      font-size: $txt-figli-m!important;
      line-height: $Flhome-m!important;
    }
  }
  .other_projets{
    h3{
      font-size: $txt-figli-m;
    }
  }

  body{
    &:not(.home){
      #start{
        margin-top: $Flhome;
      }
    }
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  body{
    #start{
      width: $Wi80-m;
      #text_figli{
        #item_list{
          .card{
            width: $Wi33-m;
            #item{
              width: calc(300% + (.5rem * 3));
            }
          }
        }
      }
    }
  }
}