// Preprocess-provided header image duplicated as background
@include breakpoint(l) {
  .layout-background {
    background-image: none;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: center;
    background-position-y: 0;
    background-size: contain;
    background-blend-mode: multiply;
    position: fixed;
    width: 100vw;
    height: calc(100vw / 2); /* aspect ratio of header image style */
  }
  .layout-background:after {
    content: '';
    display: block;
    width: calc(100vw);
    height: calc(100vw / 2);
    background-color: #f4f4ff73;
    backdrop-filter: blur(7px);
  }
}

.layout-container {
   @include grid();
   background: $color-bg-light;
   margin: 0 auto;
   max-width: $grid-layout-max-width;

  .header {
    grid-column: 2 / 16;
    grid-row: 1;
  }

  .breadcrumbs {
    grid-column: 2 / 16;
    grid-row: 2;
  }

  .hero-intro {
    grid-column: 1 / 17;
    grid-row: 3;
    //margin-bottom: -2rem;
    // /* min-height obsolete with bookmark in this region */
    //min-height: 5rem;

    @include breakpoint(m) {
      grid-column: 1 / 17;
      margin-bottom: -3rem;
    }

    @include breakpoint(l) {
      grid-column: 1 / 17;
      margin-bottom: -4.75rem;
    }
  }

  main.main {
    grid-column: 1 / 17;
    grid-row: 4;
    @include grid();

    .main__page-title {
      grid-column: 2 / 16;
      grid-row: 1;
      margin: 0 (-1 * $grid-gutter);
      background: $color-bg-light;
      position: relative;
      min-height: 2rem;
      padding: 0 $grid-gutter;

      @include breakpoint(m) {
        grid-column: 3 / 15;
        @include grid(repeat(12, 1fr));
        margin: 0;
        padding: 0;
        min-height: 5rem;
      }

      @include breakpoint(l) {
        min-height: 8.25rem;
      }

      .region-pagetitle {
        margin: 0;

        @include breakpoint(m) {
          grid-column: 2 / 12;
        }
      }
    }

    .main__content {
      grid-column: 1 / 17;
      grid-row: 2;
      margin: 0;

      .region-content {
        @include grid();
        margin-bottom: $grid-gutter;
        min-height: 20rem;

        > .grid-child-fullwidth {
          grid-column: 1 / -1;

          @include breakpoint(m) {
            grid-column: 1 / -1;
          }
        }
      }
    }
  }

  .footer {
    grid-column: 2 / 16;
    grid-row: 5;
    position: relative;
  }
}

// Basic layout for all blocks so they are not floating around.
// This is as simple as possible on purpose, so it can be overridden easily.
.region-content > .block {
  grid-column: 2 / 16;
  margin: $grid-gutter 0;
  @include breakpoint(m) {
    grid-column: 4 / 14;
  }
}
