@layer ds_components {
  .comp-logo {
    color: var(--ds-component-logo-color-claim);
    svg {
      width: var(--ds-component-logo-width-compact);
      margin-block-end: 0.25lh;
      height: auto;

      & .is-color-primary {
        fill: var(--ds-component-logo-color-primary);
      }

      & .is-color-secondary {
        fill: var(--ds-component-logo-color-secondary);
      }

      @container body (width > 50rem) {
        width: var(--ds-component-logo-width-relaxed);
      }
    }

    figcaption {
      line-height: 0;
      font-size: var(--ds-component-logo-font-size-claim-compact);
      white-space: nowrap;

      @container body (width > 50rem) {
        font-size: var(--ds-component-logo-font-size-claim-relaxed);
      }
    }
  }
}