@mixin dashboardLayoutWidth(
  $width: calc(100% - var(--pi-spacing-x-large)),
  $max-width: calc(100% - var(--pi-spacing-x-large)),
  $margin: var(--pi-height-header-mobile) auto 0
) {
  .pi-layout {
    &.pi-layout__01-dashboard {
      width: $width;
      max-width: $max-width;
      margin: $margin;
    }
  }
}

.pi-layout {
  &.pi-layout__01-dashboard {
    display: grid;
    align-items: center;
  }
}

html {
  // Maobile & Tablet
  &:not(.is-desktop) {
    // Small devices
    @include dashboardLayoutWidth;
  }
  // Large device
  &:not(.is-mobile) {
    // Tablet L & Desktop S, M & L > 2400px
    @media screen and (min-width: 62rem) and (max-width: 140rem) {
      @include dashboardLayoutWidth(
        calc(100% - var(--pi-spacing-x-large)),
        calc(100% - var(--pi-spacing-x-large)),
        unset
      );
    }
    // X Large device
    @media screen and (min-width: 140rem) {
      @include dashboardLayoutWidth(
        calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
        calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
        unset
      );
    }
  }
}