.section {
    --padding-block-section: var(--space-4xl-5xl);
    --gap-section: var(--space-2xl-3xl);
    display: grid;
    gap: var(--gap-section);
    width: 100%;
    padding-block: var(--padding-block-section);
  }

  .section--hero .container {
    min-block-size: 50svh;
    place-content: center;
  }



  /* ===== Global Fluid Grid Container ===== */
  .container {
    --gap-container: var(--space-l-xl);
    display: grid;
    grid-template-rows: auto;
    place-self: center;
    gap: var(--gap);
    row-gap: var(--gap-container);
    padding-inline: var(--grid-gutter);
    margin-inline: auto;
    max-width: var(--grid-max-width);
  }

  /* ===== Global Grid Container and Modifiers ===== */
  .grid,
  [class^="grid--"] {
    --grid-columns: 12;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    grid-template-rows: auto;
    gap: var(--gap);
    row-gap: calc(var(--gap) * 1.25);
    width: 100%;
    margin-inline: auto;
  }


  /* ===== Grid Column for Content Wrapping ===== */

  .grid-column {
    display: flex;
    flex-flow: column;
    justify-items: space-between;
    gap: var(--gap);
  }

  .grid-row {
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      margin-inline: auto;
      flex-flow: column;
      gap: 0;
  }





  /* ===== Grid Column Modifiers ===== */
  .grid--1cols {
    --grid-columns: 1;
  }

  .grid--2cols {
    --grid-columns: 2;
  }

  .grid--3cols {
    --grid-columns: 3;
  }

  .grid--4cols {
    --grid-columns: 4;
  }

  .grid--5cols {
    --grid-columns: 5;
  }

  .grid--6cols {
    --grid-columns: 6;
  }

  /* ===== Grid Children Span Setup ===== */
  .grid>* {
    grid-column: span 1;
  }

  [class^="grid--"]>* {
    grid-column: span 1;
  }

  /* ===== Responsive Grid Helpers ===== */
  .grid-span-2 {
    grid-column: span 2;
  }

  .grid-span-3 {
    grid-column: span 3;
  }

  .grid-span-4 {
    grid-column: span 4;
  }

  .grid-span-5 {
    grid-column: span 5;
  }

  .grid-span-6 {
    grid-column: span 6;
  }

  .grid-span-8 {
    grid-column: span 8;
  }

  .grid-span-12 {
    grid-column: span 12;
  }
    /* ===== Responsive Grid Helpers ===== */
    .grid-span-2 {
      grid-column: span 2;
    }
  
    .grid-span-3 {
      grid-column: span 3;
    }
  
    .grid-span-4 {
      grid-column: span 4;
    }
  
    .grid-span-5 {
      grid-column: span 5;
    }
  
    .grid-span-6 {
      grid-column: span 6;
    }
  
    .grid-span-8 {
      grid-column: span 8;
    }
  
    .grid-span-12 {
      grid-column: span 12;
    }

    /* Row Span Classes */
    .grid-row-span-2 {
      grid-row: span 2;
    }

    .grid-row-span-3 {
      grid-row: span 3;
    }

    .grid-row-span-4 {
      grid-row: span 4;
    }

    .grid-row-span-5 {
      grid-row: span 5;
    }

    .grid-row-span-6 {
      grid-row: span 6;
    }

    .grid-row-span-8 {
      grid-row: span 8;
    }

    .grid-row-span-12 {
      grid-row: span 12;
    }

  /* ===== Complex Layout Patterns ===== */

  /* Banner Grid */


  .grid--banner {
    position: relative;
    display: grid;
    gap: var(--gap);
    padding-block: var(--gap);
    width: 100%;
    border-radius: var(--border-radius-large);
    min-block-size: 10vh;
    z-index: 999;
  }

  .grid.grid--banner :is(.grid-row) {
    display: flex;
    flex-flow: column;
    gap: 0;
    grid-column: 2 / -2;
  }


  /* ===== Layered Grid for Heroes and Banners ===== */

  .grid--layers {
    display: grid;
    padding-block: 0;
    grid-template-areas: "content";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-content: center;
    gap: 0;
    width: 100%;
    overflow: clip;
    height: fit-content;
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);

  }

  .grid--layers :where(.hero__container, .cta__container) {
    grid-area: content;
    place-self: center;
    z-index: 2;
    height: 100%;
    width: 100%;
    max-height: 100svh;
  }

  .cta__container, .sticky__card {
    margin-block: auto;
  }

  :where(.grid--layers,.parallax):is(img, picture) {
    grid-area: content;
    object-fit: cover;
    object-position: center;
    width: 100%;
    overflow: clip;
    z-index: 0;

    --background-img-brightness: 0.45;
    --background-img-saturate: 1.25;

    filter: brightness(var(--background-img-brightness)) saturate(var(--background-img-saturate));
  }


  .grid--layers :where(.grid-column):has(img, picture, svg) {
    overflow: clip;
    max-block-size: 100svh;
    grid-area: content;
    place-self: center;
    width: 100%;
    height: 100%;
  }


  .grid--layers :where(.grid-column):has(img, picture, svg) :is(img, picture, svg) {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }

  .cta__container {
    position: relative;
    border-radius: var(--border-radius-large);
    overflow: clip;
  }



  :is(.cta__container, .sticky__card) :is(img, picture, svg) {
    position: absolute;
    margin-block-start: -2rem;
    inset-block-start: 0;
    inset-inline-end: 0;
    height: 110%;
    width: auto;
    object-fit: contain;
    object-position: center;
    transform: rotate(1deg);
    z-index: 0;
  }



  .sticky__card {
    position: relative;
    border-radius: var(--border-radius-large);
    overflow: clip;
    border: 1px solid var(--color-border);
  }




  /* Grid column styles use global component styles from components.css */

    /* ===== Low Specificity styling for global flex containers (Header, Body, and Footer) ===== */

 :where([class$="__header"], [class$="__body"],  [class$="__footer"]) {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: unset;
}

/* ===== Margin Between Sibling Elements in Content Wrapper Header, Body, and Footer ===== */

/*:where([class$="__header"], [class$="__body"], [class$="__footer"])>*+* {
  margin-block-start: var(--flow-space);
}*/

/* ===== Visual Element Styles ===== */
:where([class$="__visual"]) {
  width: 100%;
  max-width: 100%;
  height: auto;
  
}

/* ===== Image and Picture Styles within Visual Elements ===== */

:where([class$="__visual"]) :is(img, picture) {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}


.grid-span-2.grid-column__visual :is(img, picture) {
  max-inline-size: 80%
}

/* ===== Icon Styles within Visual Elements ===== */


:where([class$="__visual"]) :is(.icon) {
  max-block-size: var(--step-4);
  max-inline-size: var(--step-4);
  padding-inline: var(--space-2xs);
  padding-block: var(--space-2xs);
  border-radius: var(--border-radius-small);
  display: grid;
  place-content: center;
}

/* SVG icon sizing */
:where([class$="__visual"]) :is(.icon svg) {
  block-size: var(--step-4);
  inline-size: var(--step-4);
}

/* Icon styles for specific grid layouts */
.grid.grid--3cols :is(.brxe-icon) {
  font-size: var(--step-1);
  padding-inline: var(--space-xs);
  padding-block: var(--space-xs);
}

.grid.grid--4cols :is(.brxe-icon) {
  font-size: var(--step-0);
  padding-inline: var(--space-xs);
  padding-block: var(--space-xs);
}

/* ===== Mobile Breakpoint ===== */
@media screen and (max-width: 768px) {
  /* Adjust grid columns for mobile */
  .grid,
  [class^="grid--"] {
    --grid-columns: 1;
    gap: var(--space-l);
  }

.header--grid {
  --grid-columns: 12;
}

.footer--grid {
  --grid-columns: 2;
}

#brx-footer :is(.grid.grid--6cols) {
  --grid-columns: 2;
}

#brx-footer :is(.grid-span-3) {
  --grid-columns: 2;
}





  /* Adjust icon sizes */
  :where([class$="__visual"]) :is(.icon) {
    max-block-size: var(--step-3);
    max-inline-size: var(--step-3);
  }

  :where([class$="__visual"]) :is(.icon svg) {
    block-size: var(--step-3);
    inline-size: var(--step-3);
  }

  /* Reset multi-column grid layouts to single column */
  .grid.grid--3cols {
    --grid-columns: 1;
  }

  .grid.grid--4cols {
    --grid-columns: 2;
  }


    /* Reset multi-column grid layouts to single column */
    .grid.grid--6cols {
      --grid-columns: 2;
    }

  .grid.grid--3cols :is(.brxe-icon),
  .grid.grid--4cols :is(.brxe-icon) {
    font-size: var(--step-0);
    padding: var(--space-2xs);
  }
}




/* Grid Image Stack - Core Layout */
.grid-img-stack {
  --stack-aspect-ratio: 1/1;
  --stack-padding: var(--space-l);
  --stack-border-radius-large: var(--border-radius-large);
  --stack-border-radius-small: var(--border-radius-small);
  
  display: grid;
  grid-template-areas: "content";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-content: center;
  gap: 0;
  width: 100%;
  height: fit-content;
  padding-block: 0;
}

/* Base Layer (Background) */
.grid-img-stack__base {
  grid-area: content;
  place-self: center;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-height: 100svh;
  aspect-ratio: var(--stack-aspect-ratio);
  padding: var(--stack-padding);
}

/* Overlay Layer (Foreground) */
.grid-img-stack__overlay {
  grid-area: content;
  place-self: center;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
  width: 100%;
  height: 100%;
  max-height: 100svh;
}

/* Visual Elements - Common Styles */
.grid-img-stack__visual {
  display: flex;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: var(--stack-border-radius-small);
  overflow: clip;
  max-block-size: 720px;
  max-inline-size: 720px;
}

:where(.grid-img-stack__visual):has(:not(img, picture)) {
  overflow: visible;
}



/* All Media Elements */
.grid-img-stack__visual :is(img, picture, svg, .icon) {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: auto;
}

/* Base Layer Visual Specifics */
.grid-img-stack__base .grid-img-stack__visual {
  margin-inline: auto;
  border-radius: var(--stack-border-radius-large);
}

/* Overlay Layer - First Visual */
.grid-img-stack__overlay .grid-img-stack__visual:nth-of-type(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  padding-block-end: var(--space-l);
  padding-inline-end: var(--space-l);
}

/* Overlay Layer - Second Visual */
.grid-img-stack__overlay .grid-img-stack__visual:nth-of-type(2) {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
  padding-block-start: var(--space-xl);
  padding-inline-start: var(--space-xl);
}

/* Overlay Layer - First Visual Media */
.grid-img-stack__overlay .grid-img-stack__visual :is(img, picture, svg, .icon):nth-of-type(1) {
  margin-block-start: auto;
}

/* Overlay Layer - Second Visual Media */
.grid-img-stack__overlay .grid-img-stack__visual :is(img, picture, svg, .icon):nth-of-type(2) {
  margin-block-end: auto;
}


.grid-img-stack__overlay .grid-img-stack__visual :is(.icon, svg) { 
  max-block-size: var(--step-8);
  max-inline-size: var(--step-8);
}