#brx-footer {
  padding-block: var(--space-2xl-3xl) var(--space-l);
  min-block-size: 20svh;
}
#brx-footer .section {
  padding-block: 0;
}

#brx-footer .container {
  gap: var(--space-2xl);
}


  /* ===== 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;
    border-radius: var(--border-radius-medium);
  }

  /* ===== 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);
  }

/**
 * buttons.css - Button Components
 * 
 * Defines button components and their variations
 */

/* Primary Button */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    font-size: var(--step-0);
    font-family: var(--font-family-sans);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--slate-1);
    background-color: var(--color-primary);
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--border-radius-full);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
  }
  
  .button:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
  }
  
  .button:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }
  
  .button:active {
    background-color: var(--color-primary-active);
    transform: translateY(1px);
  }
  
  /* Secondary Button */
  .button--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }
  
  .button--secondary:hover {
    background-color: var(--blue-3);
    border-color: var(--color-primary-hover);
  }
  
  /* Size Variations */
  .button--small {
    font-size: var(--step--1);
    padding: var(--space-2xs) var(--space-s);
  }
  
  .button--large {
    font-size: var(--step-1);
    padding: var(--space-s) var(--space-l);
  }


  /* ===== Icon List ===== */
  .icon-list {
    display: flex;
    flex-flow: column;
    gap: var(--gap);
  }

  /* ===== Icon List Item ===== */
  .icon-list__list-item {
    --gap: var(--space-2xs);
    --list-item-color-background: unset;
    grid-column-gap: var(--gap);
    grid-row-gap: var(--gap);
    flex-flow: column;
    align-items: flex-start;
    display: flex;
    background-color: var(--list-item-color-background);
  }
  
  /* ===== Icon List Item Horizontal ===== */
  .icon-list__list-item--horizontal {
    flex-flow: row;
    justify-content: flex-start;
    width: 100%;
    display: flex;
  }

  /* ===== Icon List Item Color Background ===== */
  .icon-list__list-item--color-background {
    --list-item-color-background: var(--color-background-secondary);
    padding-inline: var(--space-s);
    padding-block: var(--space-s);
    border-radius: var(--border-radius-small);
  }

  /* ===== Icon List Icon Box ===== */
  .icon-list__icon-box {
    display: grid;
    place-content: center;
    border-radius: var(--border-radius-small);
    background-color: var(--color-background-secondary);
    padding-inline: var(--space-2xs);
    padding-block: var(--space-2xs);
  }

  /* ===== Icon List Content ===== */
  .icon-list__content {
    display: flex;
    flex-flow: column;
    gap: var(--gap);
  }

  /* ===== Icon List Header ===== */
  .icon-list__header {
    display: flex;
    flex-flow: column;
  }

  /* ===== Icon List Body ===== */
  .icon-list__body {
    display: flex;
    flex-flow: column;
  }


.sticky-container {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: calc(var(--gap) * 4);
}
.sticky-container__card {
  --padding-block-section: calc(var(--space-3xl-4xl) * 2); 
  position: sticky;
  top: var(--padding-block-section);
  display: flex;
  flex-flow: column;
  gap: calc(var(--gap) * 4);
}

  .sticky-container__card .grid-column:not(:has(.grid-column__visual)) {
    padding-inline: var(--gap);
    padding-block: var(--gap);
    flex-flow: column;
    justify-content: space-between;
}

.divider {
  border-top: 1px solid var(--color-primary);
  margin-block: var(--space-2xs);
}