/* ----------- extra small ----------- */
@media screen
  and (max-width: 399px) {
    .locus.tile > .content-item {
      width: 98%;
    }
    .empty.on-path .locus.gene:not(.index), .on-path .locus.gene:not(.index) {
      .content-item {
       min-width: 100%;
       margin-left: 0 !important;
      }
    }
  }
/* ----------- small ----------- */
@media screen
  and (min-width: 400px) 
  and (max-width: 599px) {
    .locus.tile > .content-item {
      width: 48%;
    }
    .empty.on-path .locus.gene:not(.index), .on-path .locus.gene:not(.index) {
      .content-item {
        min-width: calc(50% - 40px);
      }
    }
  }
/* ----------- medium ----------- */
@media screen 
  and (min-width: 600px) 
  and (max-width: 899px) {
    .locus.tile > .content-item {
      width: 28%;
    }
    .empty.on-path .locus.gene:not(.index), .on-path .locus.gene:not(.index) {
      .content-item {
        min-width: calc(33.3% - 60px);
      }
    }
  }
/* ----------- large ----------- */
@media screen 
  and (min-width: 900px) 
  and (max-width: 1279px) {
    .locus.tile > .content-item {
      width: 23%;
    }
  }
/* ----------- extra large ----------- */
@media screen 
  and (min-width: 1280px) {
    .locus.tile > .content-item {
      width: 18%;
    }
  }


@media screen 
  and (max-width: 599px){
    #locimoi {
    --divider: 0.98 !important;
    }
    .locus.gene .content-item.in-path {
      min-width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 1);
      > .ci-title  {
        height: auto !important; 
      }
      > .ci-cover {
        display: none !important;
      }
      > .locus.gene {
        min-width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 1);
        flex-flow: row nowrap;
        overflow-x: scroll;
        margin-bottom: 20px;
        margin-top: 10px;
        > .content-item {
          width: auto;
          margin-right: 6px;
        }
        .ci-title {
          display: flex;
          flex-flow: row nowrap;
          white-space: nowrap;
        }
      }
    }
    
    .in-path .content-item.in-path {
      min-width: auto !important;
    }
    
    .locus.gene .content-item.on-path {
      min-width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 1);
      > .locus.gene {
        .content-item {
          margin-left: 0;
          width: 100%;
        }
      }
    }
    .in-path > .locus.gene .content-item.on-path {
      min-width: auto;
    }
    .locus.content, .locus.meta {
      min-width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 1);
    }
  }
  
/*@media screen 
  and (max-width: 899px) {
    .locus.poster {
      .content-item {
        width: 48%;
      }
    }
  }
@media screen 
  and (min-width: 900px) {
    .locus.poster {
      .content-item {
        width: calc(32% - 40px);
      }
    }
  }*/