/* #region RESPONSIVE LAYOUT 1 */

/* Create the layout by creating a grid */

body {
  display: grid;
  grid-template-areas:
    "pageHeader"
    "spotlight"
    "main"
    "pageFooter";
  /* Set all grid areas to fill based on the content, except the footer, stretch it to make sure it's on the bottom of a small page */
  grid-template-rows: max-content max-content max-content auto;
  min-height: 100vh;
}

body > header {
  grid-area: pageHeader;
}

body > aside#spotlight {
  grid-area: spotlight;
}

body > main {
  grid-area: main;
}

body > footer {
  grid-area: pageFooter;
  /* Center the content of the footer to the bottom of the container */
  margin: auto 0 0 0;
}

body > * {
  /* Set sensible default for sectional padding. Applies to all sectional elements that are direct children of the body element, and then again within the section */
  /*padding: 1rem clamp(15px, 2vw, 50vw);*/

  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: clamp(
    var(--minContentPadding),
    calc((100% - var(--maxContentWidth)) / 2),
    100%
  );
  padding-right: clamp(
    var(--minContentPadding),
    calc((100% - var(--maxContentWidth)) / 2),
    100%
  );
}

/* #endregion */