.flex {display: flex;}
  .flex.jc {justify-content: center;}
  .flex.js {justify-content: flex-start;}
  .flex.je {justify-content: flex-end;}
  .flex.ja {justify-content: space-around;}
  .flex.jb {justify-content: space-between;}
  .flex.ac {align-items: center;}
  .flex.as {align-items: flex-start;}
  .flex.ae {align-items: flex-end;}
  .flex.ab {align-items: baseline;}
  .flex.ww {flex-wrap: wrap;}
  .flex.wn {flex-wrap: nowrap;}
  .flex.dc {flex-direction: column;}
  .flex.dr {flex-direction: row;}
  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (max-width: 768px) {
    .flex.XS_jc {justify-content: center;}
    .flex.XS_js {justify-content: flex-start;}
    .flex.XS_je {justify-content: flex-end;}
    .flex.XS_ja {justify-content: space-around;}
    .flex.XS_jb {justify-content: space-between;}
    .flex.XS_ac {align-items: center;}
    .flex.XS_as {align-items: flex-start;}
    .flex.XS_ae {align-items: flex-end;}
    .flex.XS_ab {align-items: baseline;}
    .flex.XS_ww {flex-wrap: wrap;}
    .flex.XS_wn {flex-wrap: nowrap;}
    .flex.XS_dc {flex-direction: column;}
  }