/*
 * Forces a layout-related container to use the full available width.
 *
 * In this project it is mainly used on <main>, so a page can build its own
 * .l-wrapper or .l-wrapper-outer sections inside the full-width main area.
 */
.l-full {
  width: 100%;
  max-width: none;
}

/* fix the hacky workaround from _base.scss */
main.l-full {
  overflow-x: initial;
  margin: 0;
  padding: 0;
}

/*
 * Standard centered content wrapper for modern CSS sections.
 *
 * Use inside full-width layout areas when content should align to the shared
 * layout width and keep the global inline padding.
 */
.l-wrapper,
.l-wrapper-outer {
  width: 100%;
  margin-inline: auto;
}

.l-wrapper {
  padding-inline: var(--layout-inline-padding);
  max-width: var(--layout-max-width);
}

.l-wrapper-outer {
  max-width: var(--layout-outer-max-width);
}

/*
 * Centered two-column wrapper with a fixed sidebar track.
 */
.l-wrapper-sidebar {
  --sidebar-width: 270px;
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-inline-padding);
}

@media (min-width: 650px) {
  .l-wrapper-sidebar {
    gap: 25px;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-areas: "sidebar main";
    align-items: start;
  }

  .l-wrapper-sidebar--mirrored {
    grid-template-columns: 1fr var(--sidebar-width);
    grid-template-areas: "main sidebar";
  }

  .l-wrapper-sidebar__main {
    grid-area: main;
  }

  .l-wrapper-sidebar__sidebar {
    grid-area: sidebar;
  }
}

@media (min-width: 980px) {
  .l-wrapper-sidebar {
    padding-left: 0;
    padding-right: var(--layout-inline-padding);
  }

  .l-wrapper-sidebar--mirrored {
    padding-left: var(--layout-inline-padding);
    padding-right: 0;
  }
}