:host { display: inline-block; } .person { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); justify-items: center; align-items: center; position: relative; row-gap: var(--row-gap); > div { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } > rc-svg { position: absolute; bottom: 0; left: 0; width: 58%; } .head, .body, .legs { grid-column: 1; } .arms { grid-column: 2; } .head { grid-row: 1; } .body, .arms { grid-row: 2; } .legs { grid-row: 3; } }