.layout-boxed {

  .container {
    background-color: var(--#{$prefix}page-bg);
  }

  .page-header {
    background-color: transparent;
  }
  .page-header .container {
    background-color: var(--#{$prefix}page-header-bg);
  }

  .page-content > div {
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
    padding-right: calc(var(--bs-gutter-x) * 1.5);
    padding-left: calc(var(--bs-gutter-x) * 1.5);
  }

  /* footer background example */
  .page-footer .container:before {
    content: "";
    position: absolute;
    background-color: var(--#{$prefix}page-footer-bg);
    bottom: 0;
    left: 0;
    top: 0;
    z-index: -2;
    right: 0;
  }

  .page-main {
    &__lower {
      padding-top: 3rem;
    }
  }

  @include media-breakpoint-up(lg) {
    .page-main .container {
      position: relative;
    }

    .page-footer .container, .page-header .container, .breadcrumb-section .container {
      padding-right: 30px;
      padding-left: 30px;
    }

    .hero {
      margin-left: -12px;
      margin-right: -12px;
    }

    .fake-shadow {
      position: absolute;
      background-color: transparent;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: 0 0 12px 0;
      margin-bottom: 2rem;
      z-index: -1;
    }
  }

  @include media-breakpoint-down(md) {
    .page-main .container {
      position: relative;

      & > .frame {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
        margin-right: -15px;
      }
    }
    .hero {
      margin-left: -15px;
      margin-right: -15px;
    }
  }

  .page-footer {
    padding-bottom: 2rem;

    & > div > .container {
      background-color: var(--#{$prefix}page-footer-bg);
    }
  }

}

.layout-full {

  .page-footer {
    background-color: var(--#{$prefix}page-footer-bg);
    border-top: 1px solid #ddd;
  }

  @include media-breakpoint-up(lg) {
    .page-header {
      box-shadow: 0 0 3px #bbb;
    }
  }
}

.layout-Onepager {
  #page {
    padding-top: 0;
  }

  @include media-breakpoint-up(lg) {
    #page {
      padding-top: 0;
    }
  }

  .page-main {
    padding-top: 0;
  }

  .frame {
    scroll-margin-top: 15rem;

    @include media-breakpoint-up(lg) {
      scroll-margin-top: 0;
    }

    & > .container > a, & > a {
      scroll-margin-top: var(--#{$prefix}scroll-margin-top);
      @include media-breakpoint-up(lg) {
        scroll-margin-top: 0;
      }
    }
  }
}