@layer components {
  .c-composition-container { padding-block: var(--space-5); }
  .c-composition-spread { --cluster-justify: space-between; }
  .c-composition-map {
    position: relative; isolation: isolate; overflow: clip; min-block-size: calc(var(--space-10) * 2);
    border: var(--wa-border-width) solid var(--wa-context-surface-border); border-radius: var(--wa-radius-panel);
    background-color: var(--wa-color-accent-soft);
    background-image: linear-gradient(32deg, transparent 44%, var(--wa-color-surface) 44%, var(--wa-color-surface) 51%, transparent 51%),
      linear-gradient(112deg, transparent 39%, var(--wa-color-surface) 39%, var(--wa-color-surface) 47%, transparent 47%),
      linear-gradient(170deg, transparent 57%, var(--wa-color-surface) 57%, var(--wa-color-surface) 64%, transparent 64%);
  }
  .c-composition-map::after {
    content: ''; position: absolute; inset-block-start: 46%; inset-inline-start: 56%;
    inline-size: var(--space-5); block-size: var(--space-5); border-radius: var(--wa-radius-control);
    background: var(--wa-color-action); border: var(--border-2) solid var(--wa-color-on-action); box-shadow: var(--wa-shadow-level);
    pointer-events: none;
  }
}

@layer components {
  .c-composition-grid-2, .c-composition-grid-3, .c-composition-grid-4 { --grid-min: 100%; }
  @media (min-width: 36rem) {
    .c-composition-grid-2, .c-composition-grid-3, .c-composition-grid-4 { --grid-min: calc((100% - var(--grid-gap, var(--space-4))) / 2); }
  }
  @media (min-width: 64rem) {
    .c-composition-grid-3 { --grid-min: calc((100% - var(--grid-gap, var(--space-4)) * 2) / 3); }
    .c-composition-grid-4 { --grid-min: calc((100% - var(--grid-gap, var(--space-4)) * 3) / 4); }
  }
}
@layer components {
  .c-composition-statistics { --grid-gap: 0; --grid-min: 50%; }
  .c-composition-statistics > * { min-inline-size: 0; padding: var(--space-3) var(--space-4); }
  .c-composition-statistics > :nth-child(2n) { border-inline-start: var(--wa-border-width) solid var(--wa-context-surface-border); }
  .c-composition-statistics > .c-component-labeled-value { --stack-gap: var(--space-1); }
  @media (min-width: 64rem) {
    .c-composition-statistics { --grid-min: 25%; }
    .c-composition-statistics > :nth-child(4n + 3) { border-inline-start: var(--wa-border-width) solid var(--wa-context-surface-border); }
  }
}
@layer components {

.c-composition-editorial-grid { --grid-gap: var(--space-8); --grid-min: 100%; align-items: start; }
@media (min-width: 56rem) {
 .c-composition-editorial-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 .c-composition-editorial-grid > * { grid-column: span 5; }
 .c-composition-editorial-grid > :nth-child(4n + 1), .c-composition-editorial-grid > :nth-child(4n + 4) { grid-column: span 7; }
}

}