/* DO NOT REMOVE THIS COMMENT, HOUSE WILL COLLAPSE */

/* Fallback for new css properties used in Figma (leading-text)
  Mixin generated at http://text-crop.eightshapes.com/ and altered syntax
  https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
*/

.footer {
  border-top: 10px solid var(--fdic-border-divider-accent);
  box-shadow: inset 0 2px 0 var(--fdic-text-inverted);
  background-color: var(--fdic-background-inverted);
  color: var(--fdic-text-inverted);
  font-family: var(--fdic-font-stack-sans);
}

.footer__inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--fdic-spacing-md);
    padding-block: var(--fdic-spacing-2xl);
  }

@media (min-width: 768px) {

.footer__inner {
      align-items: flex-end;
      flex-direction: row
  }
    }

.footer__text {
    font-size: 24px; /* @todo define in globals */
    font-weight: var(--fdic-font-weight-sans-semibold);
  }

.footer ul,
  .footer li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

.footer a {
    color: var(--fdic-text-primary);
    text-decoration: none;
    color: var(--fdic-text-inverted);
    font-family: var(--fdic-font-stack-sans);
  }

.footer__primary {
    display: flex;
    flex-direction: column;
    gap: var(--fdic-spacing-xs);
  }

@media (min-width: 768px) {

.footer__secondary {
      margin-inline-start: 128px /* @todo define in globals */
  }
    }

.footer__secondary > ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-columns: repeat(2, 1fr);
      /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
      -moz-column-gap: var(--fdic-spacing-2xl);
           column-gap: var(--fdic-spacing-2xl);
      row-gap: 12px; /* @todo define in globals */
    }

@media (min-width: 768px) {

.footer__secondary > ul {
        grid-template-columns: repeat(4, 1fr)
    }
      }