
.section {
  position: relative;

  .background {
    @extend .hero-bg;
    position: absolute;

  }
}


.container, .container-fluid {
  padding-top: map_get($spacers, medium);
  padding-bottom: map_get($spacers, medium);
  position: relative;
}

main > .section:first-child {
  padding-top: map-get($nav-main-height, "md");

  @include media-breakpoint-up(md) {
    padding-top: map-get($nav-main-height, "md");
  }

  @include media-breakpoint-up(lg) {
    padding-top: map-get($nav-main-height, "lg");
  }

  @include media-breakpoint-up(xl) {
    padding-top: map-get($nav-main-height, "xl");
  }

  @include media-breakpoint-up(xxl) {
    padding-top: map-get($nav-main-height, "xxl");
  }

}

.section-hero {
  padding-top: inherit!important;
}
