@layer ds_components {
  .comp-header {
    box-shadow: var(--ds-semantic-decoration-box-shadow-default);
    padding-block: var(--ds-semantic-whitespace-box-block-compact);
    padding-inline: var(--ds-semantic-whitespace-box-inline-compact);
    display: flex;
    align-items: center;

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

    .is-inner {
      max-width: calc(var(--ds-semantic-page-max-width));
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
      width: 100%;
    }

    a {
      text-decoration: none;
      width: fit-content;
      height: fit-content;
      display: inline-block;
    }
  }
}