*,
*::before,
*::after{
  box-sizing:border-box;
}
#route-voices .route-block,
#route-voices .route-menu,
#route-voices .route-main,
#route-voices .route-side,
#tangier .city-layout,
#tetouan .city-layout,
#chefchaouen .city-layout,
#asilah .city-layout,
#larache .city-layout,
#ouazzane .city-layout,
#taza .city-layout,
#al-hoceima .city-layout,
#tangier .text-panel,
#tetouan .text-panel,
#chefchaouen .text-panel,
#asilah .text-panel,
#larache .text-panel,
#ouazzane .text-panel,
#taza .text-panel,
#al-hoceima .text-panel,
#tangier .photo-mosaic.six-rect,
#tetouan .photo-mosaic.six-rect,
#chefchaouen .photo-mosaic.six-rect,
#asilah .photo-mosaic.six-rect,
#larache .photo-mosaic.six-rect,
#ouazzane .photo-mosaic.six-rect,
#taza .photo-mosaic.six-rect,
#al-hoceima .photo-mosaic.six-rect{
  min-width:0!important;
  max-width:100%!important;
}
@media (max-width:1830px) and (min-width:1221px){
  #route-voices .route-block{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    justify-content:stretch!important;
    grid-template-columns:minmax(280px,.84fr) minmax(360px,1fr) minmax(300px,1fr)!important;
    gap:22px!important;
  }
  #route-voices .route-menu,
  #route-voices .route-main,
  #route-voices .route-side{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #route-voices .route-side{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:1220px){
  #tangier .city-layout,
  #tetouan .city-layout,
  #chefchaouen .city-layout,
  #asilah .city-layout,
  #larache .city-layout,
  #ouazzane .city-layout,
  #taza .city-layout,
  #al-hoceima .city-layout,
  #tetouan .city-layout.reverse,
  #asilah .city-layout.reverse,
  #ouazzane .city-layout.reverse,
  #al-hoceima .city-layout.reverse{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-content:stretch!important;
    align-items:stretch!important;
  }
  #tangier .city-layout > *,
  #tetouan .city-layout > *,
  #chefchaouen .city-layout > *,
  #asilah .city-layout > *,
  #larache .city-layout > *,
  #ouazzane .city-layout > *,
  #taza .city-layout > *,
  #al-hoceima .city-layout > *{
    min-width:0!important;
    max-width:100%!important;
  }
  #tangier .text-panel,
  #tetouan .text-panel,
  #chefchaouen .text-panel,
  #asilah .text-panel,
  #larache .text-panel,
  #ouazzane .text-panel,
  #taza .text-panel,
  #al-hoceima .text-panel{
    width:100%!important;
    max-width:100%!important;
  }
  #tangier .photo-mosaic.six-rect,
  #tetouan .photo-mosaic.six-rect,
  #chefchaouen .photo-mosaic.six-rect,
  #asilah .photo-mosaic.six-rect,
  #larache .photo-mosaic.six-rect,
  #ouazzane .photo-mosaic.six-rect,
  #taza .photo-mosaic.six-rect,
  #al-hoceima .photo-mosaic.six-rect{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #route-voices .route-block,
  #route-voices .route-menu,
  #route-voices .route-main,
  #route-voices .route-side{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
  }
}
@media (max-width:760px){
  #tangier .city-layout,
  #tetouan .city-layout,
  #chefchaouen .city-layout,
  #asilah .city-layout,
  #larache .city-layout,
  #ouazzane .city-layout,
  #taza .city-layout,
  #al-hoceima .city-layout,
  #tetouan .city-layout.reverse,
  #asilah .city-layout.reverse,
  #ouazzane .city-layout.reverse,
  #al-hoceima .city-layout.reverse{
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
  }
  #tangier .text-panel,
  #tetouan .text-panel,
  #chefchaouen .text-panel,
  #asilah .text-panel,
  #larache .text-panel,
  #ouazzane .text-panel,
  #taza .text-panel,
  #al-hoceima .text-panel{
    padding:24px!important;
  }
  #tangier .photo-mosaic.six-rect,
  #tetouan .photo-mosaic.six-rect,
  #chefchaouen .photo-mosaic.six-rect,
  #asilah .photo-mosaic.six-rect,
  #larache .photo-mosaic.six-rect,
  #ouazzane .photo-mosaic.six-rect,
  #taza .photo-mosaic.six-rect,
  #al-hoceima .photo-mosaic.six-rect{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #route-voices .route-side{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}