.page {
  $component-name: ".page";

  min-height: 100vh;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto 1fr auto;
  grid-template-areas:
    "accessibility"
    "pre-header"
    "header"
    "post-header"
    "content"
    "footer"
  ;

  &--sidebar-left {
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "accessibility"
      "pre-header"
      "header"
      "post-header"
      "content"
      "sidebar"
      "footer"
    ;

    @include breakpoint("wide") {
      grid-template-columns: $page-width-sidebar auto;
      grid-template-rows: auto auto auto auto 1fr auto;
      grid-template-areas:
        "accessibility accessibility"
        "pre-header pre-header"
        "header header"
        "post-header post-header"
        "sidebar content"
        "footer footer"
      ;
    }
  }

  &--navigation-sidebar-left {
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "accessibility"
      "pre-header"
      "header"
      "post-header"
      "sidebar"
      "content"
      "footer"
    ;

    @include breakpoint("wide") {
      grid-template-columns: $page-width-sidebar auto;
      grid-template-rows: auto auto auto auto 1fr auto;
      grid-template-areas:
        "accessibility accessibility"
        "pre-header pre-header"
        "header header"
        "post-header post-header"
        "sidebar content"
        "footer footer"
      ;
    }

    @include breakpoint("max-width") {
      grid-template-columns: calc(#{$page-width-sidebar} + 50vw - #{math.div($page-max-width, 2)}) auto;
    }
  }

  &--navigation-top {
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "accessibility"
      "pre-header"
      "header"
      "post-header"
      "navigation"
      "content"
      "footer"
    ;
  }

  &__accessibility {
    grid-area: accessibility;

    padding: 0 spacing($page-padding-side);
    position: relative;

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
      padding-right: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
    }
  }

  &__pre-header {
    grid-area: pre-header;
  }

  &__header {
    grid-area: header;
  }

  &__post-header {
    grid-area: post-header;
  }

  &__sidebar-left {
    grid-area: sidebar;
    padding: 0 spacing($page-padding-side) spacing($page-padding-bottom) spacing($page-padding-top);
    display: grid;

    @include breakpoint("wide") {
      padding: spacing($page-padding-top-sidebar) 0 spacing($page-padding-bottom) 0;
    }

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)});
    }

    .page--navigation-sidebar-left & {
      padding: spacing($page-padding-top-navigation) spacing($page-padding-side);

      @include breakpoint("wide") {
        padding: spacing($page-padding-top-sidebar) 0 spacing($page-padding-bottom) 0;
      }

      @include breakpoint("max-width") {
        padding-left: calc(50vw -  #{math.div($page-max-width, 2)});
      }
    }
  }

  &__navigation-top {
    grid-area: navigation;
    padding: spacing($page-padding-top-navigation) spacing($page-padding-side);

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
      padding-right: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
    }
  }


  &__content {
    grid-area: content;
    padding: spacing($page-padding-top) 0 spacing($page-padding-bottom) 0;
    display: grid;
    align-content: start;
    grid-row-gap: spacing($page-content-block-gap);
    min-height: calc(85vh - 5.875rem); //set the height of header and content to ca. 85% of the viewport in order to push the footer down on pages with little content

    @include breakpoint("wide") {
      min-height: 60vh;
    }

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)});
      padding-right: calc(50vw -  #{math.div($page-max-width, 2)});
    }

    &--centered {
       justify-items: center;

       & > .page__content__block {
         max-width: $line-width-max;
       }
    }

    &--constrain-width {  
      &-default {
        #{$component-name}__content__block {
          @include max-line-width(0);
          width: 100%; //force width to 100% - this will make the content blocks not be come more narrow when used togeter with .page__content--centered
        }
      }
  
      &-font-size-p1 {
        #{$component-name}__content__block {
          @include max-line-width(1);
          width: 100%; 
        }
      }
  
      &-font-size-p2 {
        #{$component-name}__content__block {
          @include max-line-width(2);
          width: 100%; 
        }
      }
    }

    //only use when .page__content__blocks can not be direct childrens of .page__content
    &__wrapper {
      display: grid;
      align-content: start;
      grid-row-gap: spacing($page-content-block-gap);
    }

    &__block {
      @include content-container;
      padding: 0 spacing($page-padding-side);
      min-width: 0; //ensures that things can overflow horizontally in side the grid, when we want hirzontal scrolling: https://stackoverflow.com/questions/61959291/how-to-get-scrolling-in-a-css-grid

      &--no-padding {

        padding: 0;

        & > * {
          margin-left: spacing($page-padding-side);
          margin-right: spacing($page-padding-side);
        }

        & > img,
        & > .nav--site-nav,
        & > .page__content__block__full-width-item {
          margin-left: 0;
          margin-right: 0;
        }

        &--not-on-medium-width {
          @include breakpoint("medium") {
            padding: 0 spacing($page-padding-side);

            & > * {
              margin-left: unset;
              margin-right: unset;
            }
          }
        }

        &--not-on-wide-width {
          @include breakpoint("wide") {
            padding: 0 spacing($page-padding-side);

            & > * {
              margin-left: unset;
              margin-right: unset;
            }
          }
        }
      }

      &--vertical-padding {
        padding-top: spacing(0);
        padding-bottom: spacing(0);
      }

      &--small-vertical-padding {
        padding-top: spacing(-1);
        padding-bottom: spacing(-1);
      }

      &--vertical-padding-small {
        padding-top: spacing(-1);
        padding-bottom: spacing(-1);
      }

      &--snap-above {
        margin-top: spacing($page-content-block-gap, $times: -1);

        //if it's the first content block, it snaps to the header
        &:first-child {
          margin-top: spacing($page-padding-top, $times: -1);

          //pages with sidebar or navigation on top does not allow the first content block to snap to the header
          .page--sidebar-left &,
          .page--navigation-sidebar-left &,
          .page--navigation-top & {
            margin-top: 0;
          }
        }

        &--space-by-border-width {
          margin-top: spacing($page-content-block-gap, $times: -1, $add: $width-border);

          &:first-child {
            margin-top: spacing($page-padding-top, $times: -1, $add: $width-border);
          }
        }
      }

      &--small-gap-above {
        margin-top: spacing($page-content-block-gap, $times: -1, $add: spacing($page-content-block-gap - 1));
      }

      &--extra-small-gap-above {
        margin-top: spacing($page-content-block-gap, $times: -1, $add: spacing($page-content-block-gap - 2));
      }

      &--center-align-items {

        & > {
          * {
            margin-left: auto;
            margin-right: auto;
          }

          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          p,
          blockquote {
            text-align: center;
          }

          .button {
            display: block;
          }

          .button-container {
            justify-content: center;
          }

          .form {
            max-width: $line-width-max;
          }
        }
      }

      //make background-color go edge-to-edge also in viewports above the max-width breakpoint
      &--extent-background {
        position: relative;

        &::before {
          content: "";
          display: block;
          position: absolute;
          background-color: inherit;
          width: calc(100vw - var(--vertical-scrollbar-width, 0px));
          top: 0;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }

        & > * {
          position: relative;
          z-index: $z-index-just-above-static;
        }
      }
    }

    .page--sidebar-left & {
      padding-top: spacing($page-padding-top-sidebar);
      padding-bottom: spacing(1);
      @include breakpoint("wide"){
        padding-bottom: spacing($page-padding-bottom);
      }
    }

    .page--navigation-sidebar-left & {
      padding-top: 0;
      @include breakpoint("wide"){
        padding-top: spacing($page-padding-top-sidebar);
      }

      @include breakpoint("max-width") {
        padding-right: calc(50vw -  #{math.div($page-max-width, 2)});
        padding-left: 0;
      }
    }

    .page--navigation-top & {
      padding-top: 0;
    }
  }

  &__footer {
    grid-area: footer;
    padding: spacing(0) spacing($page-padding-side);

    @include breakpoint("max-width") {
      padding-left: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
      padding-right: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
    }
  }
}