/**
 * @file
 * Base Layout.
 */
.container {
  width: 100%;
  max-width: var(--main-max-width, 85rem);
  padding-inline: var(--container-padding, var(--sp-m-l));
}

.page-wrapper {
  max-width: var(--page-max-width, 100rem);
  background: var(--page-background, var(--color--white));
}

/**
 * Creates stacking context ensuring that child elements can never appear in
 * front of mobile navigation.
 */
.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

/* Contains the social sidebar, and the primary content area. */
@media (width > 1200px) {
  .layout-main {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
  }
}

@media (width > 1200px) {
  .main-content {
    width: calc(100% - var(--content-left, var(--sp-xl-2xl)));
    margin-inline-end: auto;
  }
}

.main-content__container {
  padding-block-start: var(--sp-l-xl);
  container-type: inline-size;
}