@layer ds_components {
  .comp-content {
    padding-inline-start: var(--ds-component-content-padding-inline-default);
    padding-inline-end: var(--ds-component-content-padding-inline-default);
    padding-block-end: var(--ds-semantic-whitespace-section-break);
    margin-block-start: var(--ds-component-content-margin-block-start);
    container-type: inline-size;
    container-name: content;

    .comp-hero + & {
      margin-block-start: 0;
    }

    @container body (width > 50rem) {
      padding-inline-start: 0;
      padding-inline-end: 0;

      .comp-hero + & {
        margin-block-start: -2lh;
      }
    }

    > *:not(h1, h2, h3, h4, h5, h6) + * {
      margin-block-start: var(--ds-semantic-whitespace-section-break);
    }

    :where(h1, h2, h3, h4, h5, h6) {
      margin-block-end: 1ch;
    }
  }
}