html,
body {
  height: 100%;
}

/* Basic CSS Grid */

.page-wrapper {
  min-height: 100vh;
}

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

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

display: grid;
gap: 0;
align-items: start;
gap: 0;
grid-template-columns: [full-width-start] minmax(var(--spc-lg), 1fr) [parcel-start] var(--content-width) [parcel-end] minmax(var(--spc-lg), 1fr) [full-width-end];
}

.grid > .parcel,
.full-width > .parcel {
  container: c-parcel / inline-size;
  grid-column: parcel;
}

/* Initially, all template areas and content regions are the whole width */
header,
.region--branding,
.header__nav,
.main-wrapper,
.region--hero,
.node-content,
.region--footer-top,
.region--footer-top > div,
.region--footer-bottom,
.region--footer-bottom > div {
  grid-template-columns: 1fr;
}

/* .container--page {
  width: clamp(8em, 95cqi, var(--bkpt-lg));
} */

header,
.header__nav {
  display: grid;
  gap: var(--spc); 
}

.main-content {
  display: grid;
  gap: var(--spc); 
}

.region--footer-top,
.region--footer-bottom {
  grid-column: content;
  
  display: grid;
  gap: var(--spc); 
}

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

  header {
    grid-template-columns: 1fr 5fr;
  }
  .main-content.with-sidebar {
    grid-template-columns: 3fr 1fr;
  }

}

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

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

}