@layer kz-components {
  .content {
    max-width: var(--layout-content-max-width);
    margin: 0 var(--layout-content-side-margin);
    width: 100%;

    /* Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table) */
    min-width: 0;

    /* Currently unable to do media query equations so using a fixed value instead */
    @media (width <= 1079px) {
      margin: 0 var(--spacing-12);
    }
  }
}