html {
  @include media-breakpoint-up(sm) {
    font-size: 13px;
  }

  @include media-breakpoint-up(md) {
    font-size: 14px;
  }

  @include media-breakpoint-up(lg) {
    font-size: 15px;
  }

  @include media-breakpoint-up(xl) {
    font-size: 16px;
  }
}

// Flexbox sticky footer
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  flex-grow: 1;
}

.container-fluid {
  max-width: 100%;
  width: map-get($grid-breakpoints, xl);
}

html {
  @include media-breakpoint-up(sm) {
    font-size: 13px;
  }

  @include media-breakpoint-up(md) {
    font-size: 14px;
  }

  @include media-breakpoint-up(lg) {
    font-size: 15px;
  }

  @include media-breakpoint-up(xl) {
    font-size: 16px;
  }
}

// Flexbox sticky footer
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative; // because we have absolute position on the header
}

.wrap {
  flex-grow: 1;
}

.container-fluid {
  max-width: 100%;
  width: map-get($grid-breakpoints, xl);
}

Add relative pos to body for absolute header to work
Add relative pos to body for absolute header to work