/* ----- Layout ----- */
.app-container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}


/* ----- Grid ----- */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ----- Lesson Page Centered Layout ----- */
#page-lesson>.breadcrumbs,
#page-lesson>.page-header,
#page-lesson>.section-title,
#page-lesson>#lesson-assignments,
#page-lesson>.assignments-container-wrapper,
#page-lesson>.test-container-wrapper,
#page-lesson>.lesson-navigation,
#page-lesson>.rating-section {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}