/* html,
body {
  height: 100%;
} */

/* Basic CSS Grid */

.page-wrapper {
  min-height: 100svh;
  container: c-page-wrapper / inline-size;
}

.grid {
  --content-width: clamp(8em, 95cqi, var(--bkpt-lg));
  
  display: grid;
  align-items: start;
  grid-template-columns: [full-width-start] minmax(var(--spc-sm), 1fr) [parcel-start] var(--content-width) [parcel-end] minmax(var(--spc-sm), 1fr) [full-width-end];
  grid-template-rows: auto 1fr auto;
}

.grid > * {
  container: c-parcel / inline-size;
  grid-column: parcel;
}

.grid > .full-width {
  grid-column: full-width;
}

/* Initially, all regions are the whole width by default */

/* Make the Regions a grid by default too */
.region,
.main-wrapper,
.node__content {
  display: grid;
  gap: var(--spc); 
}

/* Header content is centred to start */
.region-header {
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.content-wrapper {
  margin-block: var(--spc-xlg);
}

.region-content {
  gap: 0;
}
.node__content {
  gap: var(--spc-xsm);
}

.region-sidebar {
  align-content: start;
}

@container c-parcel (min-width: 42rem) {

  .region-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .main-wrapper.with-sidebar {
    grid-template-columns: 3fr 1fr;
  }

}

@container c-parcel (min-width: 48rem) {
  
  .region-footer {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }
  
}

@container c-parcel (min-width: 80em) {
  
  .main-wrapper.with-sidebar {
    grid-template-columns: 4fr 2fr;
  }  

}