/**********/
/* FOOTER */
/**********/

footer {
  grid-column: full;

  display:grid;
  grid-template-columns:inherit;

  border-top:solid 1px currentcolor;
}


.footer__container {
  container-type:inline-size;
  container-name:footer__container;
  
  grid-column: large;
} 


.footer__wrapper {
  padding:calc(var(--gap) * 2) 0;

  display:grid;
  grid-template-areas: 
    "nav-main"
    "nav-additional"
    "nav-socials"
    "pay-off";
  gap:calc(3em * var(--line-height-factor));
  align-items:start;
}

footer .nav--main {
  grid-area:nav-main;
}

footer .nav--additional {
  grid-area:nav-additional;
} 

footer .nav--socials {
  grid-area:nav-socials;
}

footer .pay-off {
  grid-area:pay-off;
  place-self:center start;
  display:block;
  height:1em;
}

@media only print {
  .nav--main,
  .nav--additional,
  .nav--socials {
    display:none;
  }
}

@media only screen {
  @container footer__container (width > 32em) {
    .footer__wrapper {
      grid-template-columns: 1fr max-content;
      grid-template-rows:  auto 1fr 2.6em;
      grid-template-areas: 
        "nav-main nav-additional"
        "nav-main nav-socials"
        "nav-main  pay-off";
      gap:calc(1.25em * var(--line-height-factor)) 0;
    }

    footer .nav--socials {
      align-self:end;
      grid-auto-rows:2.6em;
      align-items: center;
    }

    footer .pay-off {  
      place-self:center center;
    }
  }

  @container footer__container (width > 44em) {
    .footer__wrapper {
      grid-template-columns: auto auto max-content;
      grid-template-rows: 1fr 2.6em;
      grid-template-areas: 
        "nav-main nav-additional nav-socials"
        "nav-main . pay-off";
    }

    footer .nav--socials {
      align-self:start;
    }

    footer .pay-off {  
      place-self:center end;
    }
  }
}