message: footer fix for safari 15 bug
  gap with column-reverse does not apply gap properly
diff: .cardstack-footer__section {
  display: flex;
  - gap: var(--boxel-sp-lg);
  justify-content: space-between;
  align-items: center;
  padding: var(--boxel-sp-sm) 0 var(--boxel-sp) 0;
  align-items: center;
  }
  -@media screen and (max-width: 560px) {
  - .cardstack-footer__important-links {
  - flex-direction: column;
  - align-items: start;
  - }
  -
  - .cardstack-footer__section--top {
  - flex-direction: column;
  - align-items: start;
  - gap: var(--boxel-sp-xxl);
  - }
  -
  - .cardstack-footer__section--bottom {
  - flex-direction: column-reverse;
  - flex-wrap: nowrap;
  - align-items: stretch;
  - border-top: none;
  - }
  -
  - .cardstack-footer__fine-print {
  - padding-top: var(--boxel-sp-sm);
  - border-top: 1px solid #585469;
  - }
  -}
  -
  .cardstack-footer__socials {
  display: flex;
  gap: var(--boxel-sp-xs) var(--boxel-sp);
  +
  + /*
  + * It is possible to apply a margin between this and the cardstack logo + fine print
  + * with flex gap.
  + * However Safari 15 appears to have a bug where flex column-reverse
  + * will not apply gap correctly. So we apply a margin directly.
  + * See the media query margin as well.
  + */
  + margin: 0 0 0 var(--boxel-sp-lg);
  flex-wrap: wrap;
  align-items: center;
  }
  align-items: center;
  font: var(--boxel-font-sm);
  }
  +
  +@media screen and (max-width: 560px) {
  + .cardstack-footer__important-links {
  + flex-direction: column;
  + align-items: start;
  + }
  +
  + .cardstack-footer__section--top {
  + flex-direction: column;
  + align-items: start;
  + gap: var(--boxel-sp-xxl);
  + }
  +
  + .cardstack-footer__section--bottom {
  + flex-direction: column-reverse;
  + flex-wrap: nowrap;
  + align-items: stretch;
  + border-top: none;
  + }
  +
  + .cardstack-footer__fine-print {
  + padding-top: var(--boxel-sp-sm);
  + border-top: 1px solid #585469;
  + }
  +
  + .cardstack-footer__socials {
  + margin: 0 0 var(--boxel-sp-lg) 0;
  + }
  +}
  