@layer ds_components {
  .comp-surface {
    background-color: var(--ds-component-surface-color-background);
    color: var(--ds-component-surface-color-content);
    border-radius: var(--ds-component-surface-radius);

    padding-inline: var(--ds-semantic-whitespace-box-inline-compact);
    padding-block: var(--ds-semantic-whitespace-box-block-compact);

    @container body (width > 50rem) {
      padding-inline: var(--ds-component-surface-padding-inline);
      padding-block: var(--ds-component-surface-padding-block);
    }
  }
}