@layer ds_components {
  .comp-footer {
    border-top: 9px solid var(--ds-semantic-colors-color-default-accent);
    padding-block: var(--ds-semantic-whitespace-box-block-compact);
    padding-inline: var(--ds-semantic-whitespace-box-inline-compact);

    @container body (width > 50rem) {
      padding-inline: var(
        --ds-layout-holy-grail-gutter-auto
      ); /* ⚠️ DEPENDENCY! */
    }

    .is-inner {
      max-width: var(--ds-semantic-page-max-width);
      margin-inline: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--ds-component-footer-gap-nav);
    }

    ul {
      display: flex;
      gap: var(--ds-component-footer-gap-nav);
      flex-wrap: wrap;
      list-style: none;
      padding-inline-start: 0;
      font-size: var(--ds-component-footer-font-size-nav);
    }
  }
}