/* the styles every block shares (each block element has class="block") */
@layer components {
  @scope (.block) {
    :scope {
      position: relative;
      container-name: --lz-block;
      container-type: inline-size;
      margin-trim: block;

      @supports not (margin-trim: block) {
        > :where(:first-child) {
          margin-block-start: 0;
        }

        > :where(:last-child) {
          margin-block-end: 0;
        }
      }

      h2 + p,
      h3 + p {
        margin-block-start: calc(-1 * var(--size-2));
      }
    }

    .block + :scope {
      margin-block-start: var(--size-3);
    }

    .block + :scope:has(h3:first-child) {
      margin-block-start: var(--size-5);
    }
  }
}