.app-page{
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: 1rem;
}

.app-section{
  margin-block: 1rem;
}

.app-stack{
  display: grid;
  gap: 1rem;
}

.app-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.sidebar-left .app-shell-left{
  order: 0;
}

.sidebar-left .app-main-col{
  order: 1;
}

.sidebar-right .app-shell-left{
  order: 1;
}

.sidebar-right .app-main-col{
  order: 0;
}

@media (min-width: 768px){
  .app-page{
    padding-inline: 1.25rem;
  }

  .app-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-grid-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-grid-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px){
  .sidebar-right .app-shell-left,
  .sidebar-right .app-main-col{
    order: initial;
  }
}