@layer layouts {  
  /* Hero Section (Landing Pages) */
  .hero-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .hero-title {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .hero-title {
      width: 83.333%; /* ~10/12 */
      margin: 0 auto;
    }
  }
  
  .hero-subtitle {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .hero-subtitle {
      width: 66.666%; /* ~8/12 */
      margin: 0 auto;
    }
  }
  
  .hero-cta {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .hero-cta {
      width: 33.333%; /* ~4/12 */
      margin: 0 auto;
    }
  }
  
  /* Generic Section Layouts */
  .section-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .section-title {
    width: 100%;
  }
  
  .section-content {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .section-content {
      width: 66.666%; /* ~8/12 */
      margin: 0 auto;
    }
  }
  
  .section-cta {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .section-cta {
      width: 33.333%; /* ~4/12 */
      margin: 0 auto;
    }
  }
  
  /* Info Pages (Cookies, Signed Up, etc.) */
  .info-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  @media (min-width: 1199.98px) {
    .info-wrapper {
      flex-direction: row;
      gap: calc(var(--gutter-default) * 2);
    }
  }
  
  .info-title {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .info-title {
      width: 50%;
    }
  }
  
  .info-content {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .info-content {
      width: 50%;
    }
  }
  
  /* Account Settings Layout */
  .account-settings-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  @media (min-width: 991.98px) {
    .account-settings-wrapper {
      flex-direction: row;
      gap: calc(var(--gutter-default) * 2);
    }
  }
  
  .account-settings-main {
    width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .account-settings-main {
      width: 66.666%; /* ~8/12 */
    }
  }
  
  @media (min-width: 1199.98px) {
    .account-settings-main {
      width: 75%; /* ~9/12 */
    }
  }
  
  .account-settings-centered {
    width: 100%;
    max-width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .account-settings-centered {
      width: 66.666%; /* ~8/12 */
      margin: 0 auto;
    }
  }
  
  @media (min-width: 1199.98px) {
    .account-settings-centered {
      width: 50%; /* ~6/12 */
    }
  }
  
  .account-settings-main-centered {
    width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .account-settings-main-centered {
      width: 66.666%; /* ~8/12 */
    }
  }
  
  @media (min-width: 1199.98px) {
    .account-settings-main-centered {
      width: 50%; /* ~6/12 */
    }
  }
  
  .account-settings-centered-wide {
    width: 100%;
    max-width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .account-settings-centered-wide {
      width: 66.666%; /* ~8/12 */
      margin: 0 auto;
    }
  }
  
  @media (min-width: 1199.98px) {
    .account-settings-centered-wide {
      width: 66.666%; /* ~8/12 */
    }
  }
  
  /* Site Header */
  .site-header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gutter-default);
  }
  
  .site-header-logo {
    flex: 0 0 auto;
  }
  
  .site-header-spacer {
    flex: 1 1 auto;
    display: none;
  }
  
  @media (min-width: 991.98px) {
    .site-header-spacer {
      display: block;
    }
  }
  
  .site-header-actions {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
  }
  
  @media (min-width: 991.98px) {
    .site-header-actions {
      flex: 0 0 auto;
      margin-left: 0;
    }
  }
  
  .site-header-buttons,
  .site-header-user-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .site-header-search {
    flex: 1 1 auto;
  }
  
  /* Site Footer */
  .site-footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  @media (min-width: 768px) {
    .site-footer-content {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: calc(var(--gutter-default) * 2);
    }
  }
  
  .site-footer-brand {
    width: 100%;
  }
  
  @media (min-width: 768px) {
    .site-footer-brand {
      flex: 0 1 25%; /* ~3/12 */
      width: auto;
    }
  }
  
  .site-footer-links {
    width: 100%;
  }
  
  @media (min-width: 640px) {
    .site-footer-links {
      width: 50%; /* ~6/12 */
    }
  }
  
  @media (min-width: 768px) {
    .site-footer-links {
      flex: 0 1 16.666%; /* ~2/12 */
      width: auto;
    }
  }
  
  .site-footer-newsletter {
    width: 100%;
  }
  
  @media (min-width: 768px) {
    .site-footer-newsletter {
      flex: 0 1 41.666%; /* ~5/12 */
      width: auto;
    }
  }
  
  @media (min-width: 1200px) {
    .site-footer-newsletter {
      flex: 0 1 33.333%; /* ~4/12 */
      width: auto;
      margin-left: 8.333%; /* ~1/12 offset */
    }
  }
  
  .site-footer-bottom-bar {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
    margin-top: calc(var(--gutter-default) * 2);
  }
  
  @media (min-width: 1200px) {
    .site-footer-bottom-bar {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .site-footer-legal {
    width: 100%;
  }
  
  @media (min-width: 1200px) {
    .site-footer-legal {
      width: 50%; /* ~6/12 */
    }
  }
  
  .site-footer-app-buttons {
    width: 100%;
  }
  
  @media (min-width: 1200px) {
    .site-footer-app-buttons {
      width: 50%; /* ~6/12 */
    }
  }
  
  /* Alert Bar */
  .alert-bar-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .alert-bar-inner {
    width: 100%;
  }
  
  /* Empty State */
  .empty-state-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .empty-state-content {
    width: 100%;
  }
  
  @media (min-width: 639.98px) {
    .empty-state-content {
      width: 100%;
    }
  }
  
  @media (min-width: 1199.98px) {
    .empty-state-content {
      width: 66.666%; /* ~8/12 */
    }
  }
  
  /* Resource Header */
  .resource-header-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .resource-header-content {
    width: 100%;
  }
  
  .s-header-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .s-header-content {
    width: 100%;
  }
  
  /* Dashboard */
  .dashboard-header-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .dashboard-header-content {
    width: 100%;
  }
  
  /* Cards Grid */
  .cards-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  @media (min-width: 991.98px) {
    .cards-grid {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
  
  .card-wrapper {
    width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .card-wrapper {
      flex: 0 0 calc(50% - var(--gutter-default) / 2);
    }
  }
  
  @media (min-width: 1199.98px) {
    .card-wrapper {
      flex: 0 0 calc(33.333% - var(--gutter-default) * 2 / 3);
    }
  }
  
  .card-col {
    width: 100%;
  }
  
  @media (min-width: 991.98px) {
    .card-col {
      width: calc(41.666% - var(--gutter-default)); /* ~5/12 */
    }
  }
  
  @media (min-width: 1199.98px) {
    .card-col {
      width: calc(33.333% - var(--gutter-default)); /* ~4/12 */
    }
  }
  
  .cards-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--gutter-default);
  }
  
  .cards-actions-content {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .cards-actions-content {
      width: 50%; /* ~6/12 */
    }
  }
  
  /* Set Item (Study/Review Screens) */
  .set-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .set-item-main {
    width: 100%;
  }
  
  /* Set Navbar */
  .set-navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gutter-default);
  }
  
  .set-navbar-left {
    flex: 0 0 auto;
  }
  
  @media (min-width: 1199.98px) {
    .set-navbar-left {
      flex: 0 0 50%; /* ~6/12 */
    }
  }
  
  .set-navbar-right {
    flex: 1 1 auto;
  }
  
  @media (min-width: 1199.98px) {
    .set-navbar-right {
      flex: 0 0 50%; /* ~6/12 */
    }
  }
  
  /* Button Options Group */
  .btn-options-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter-default);
    justify-content: center;
  }
  
  .btn-option-item {
    width: 100%;
  }
  
  @media (min-width: 639.98px) {
    .btn-option-item {
      width: calc(50% - var(--gutter-default) / 2);
    }
  }
  
  @media (min-width: 991.98px) {
    .btn-option-item {
      width: calc(25% - var(--gutter-default) * 3 / 4);
    }
  }
  
  @media (min-width: 1199.98px) {
    .btn-option-item {
      width: calc(16.666% - var(--gutter-default) * 5 / 6); /* ~2/12 */
    }
  }
  
  /* Review Mode */
  .review-mode-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .review-mode-content {
    width: 100%;
  }
  
  .review-mode-answer {
    width: 100%;
  }
  
  /* Review (Testimonials) */
  .review-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .review-main {
    width: 100%;
  }
  
  /* Edit Content */
  .edit-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .edit-content-header-wrapper {
    width: 100%;
  }
  
  .edit-content-main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  @media (min-width: 1199.98px) {
    .edit-content-main {
      width: 83.333%; /* ~10/12 */
    }
  }
  
  .edit-content-main-wide {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  @media (min-width: 1199.98px) {
    .edit-content-main-wide {
      width: 83.333%; /* ~10/12 */
    }
  }
  
  .edit-content-inner {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .edit-content-inner {
      width: 100%;
    }
  }
  
  .edit-content-cards {
    width: 100%;
  }
  
  /* Article */
  .article-wrapper {
    display: flex;
    justify-content: center;
  }
  
  .article-main {
    width: 100%;
  }
  
  /* Document Body */
  .document-body {
    width: 100%;
  }
  
  /* Grammar Notes */
  .grammar-note-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  .grammar-note-header-wrapper {
    width: 100%;
  }
  
  .grammar-note-content-wrapper {
    width: 100%;
  }
  
  /* CTA (Call to Action) */
  .cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
    align-items: center;
    text-align: center;
  }
  
  .cta-title {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .cta-title {
      width: 66.666%; /* ~8/12 */
    }
  }
  
  .cta-button {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .cta-button {
      width: 33.333%; /* ~4/12 */
    }
  }
  
  /* Form Row (for side-by-side form fields) */
  .form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-default);
  }
  
  @media (min-width: 1199.98px) {
    .form-row {
      flex-direction: row;
    }
  }
  
  .form-col {
    width: 100%;
  }
  
  @media (min-width: 1199.98px) {
    .form-col {
      width: 50%;
    }
  }
}