<p>No --size:
<div class="my-component-wrapper">
  <div class="my-component">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<p>--size: normal:
<div style="--size: normal" class="my-component-wrapper">
  <div class="my-component">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<p>--size:large:</p>
<div style="--size: large" class="my-component-wrapper">
  <div class="my-component">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<p>--size: foobar (invalid):</p>
<div style="--size: foobar" class="my-component-wrapper">
  <div class="my-component">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

@property --size {
	syntax: "normal | large",
	initial-value: normal;
	inherits: true;
}

.my-component-wrapper {
  container-name: my-component-wrapper;
}

.my-component-wrapper div {
	border: .2em solid black;
	padding: .4em;
	
	div {
		flex: 1;
	}
}

.my-component {
	display: flex;
	gap: .2em;
	max-width: 10em;
	margin: 1em;
	flex-flow: row;
}

@container my-component-wrapper style(--size: large) {
  .my-component {
    	flex-flow: column;
  }
}