.main-content {
  max-width: $break-lg;
  margin: 0 auto;
  padding: $pad-page;
  flex-grow: 1;
  // overflow: auto allows for horizontal scrolling
  // of the main-content when there is a banner. (e.g. sandbox mode)
  // Without it the main content pushes the banner off the page.
  overflow: auto;

  > :not(.main-content--animation-disabled) {
    animation: fade-in 250ms ease-out;
  }

  &__warning-banner {
    margin-bottom: $pad-large;
    // TODO: figure out if sticky styling is needed?
    position: sticky; // Needed for settings page scroll
    z-index: 4; // Needed for settings page scroll
  }

  &.manage-hosts,
  &.query-details-page,
  &.run-query-page {
    max-width: 100%;
  }
}

@media (max-width: ($break-xs - 1)) {
  .main-content {
    padding: $pad-large $pad-medium $pad-medium; // 24px top, 16px sides according to #32247
  }
}

@media (max-width: ($break-mobile-md - 1)) {
  .main-content {
    padding: 20px;
  }
}