.table { background: $color-228-25-79; color: white; display: flex; justify-content: space-around; font-weight: 600; font-size: 1.6rem; >*{ flex: 1; width: 50%; padding: 1rem; border-right: 1px solid $color-228-25-79; } >*:first-of-type { border-right: 1px solid white; } } circle-team-template { display: flex; justify-content: space-between; >* { flex: 1; width: 50%; padding: 1rem; border-right: 1px solid $color-228-25-79; border-bottom: 1px solid $color-228-25-79; } >*:nth-child(odd) { border-left: 1px solid $color-228-25-79; } } sib-multiple { label { display: none; } >team-template[name='members'] { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); >sib-display:first-child { align-self: center; grid-column: 1 / span 1; grid-row: 1 / span 2; div { background-color: $color-0-0-100; border-radius: 50%; height: 7vh; overflow: hidden; position: relative; width: 7vh; img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } } } >div:nth-child(2) { align-self: end; display: flex; grid-column: 2 / span 1; grid-row: 1 / span 1; span { align-self: center; font-weight: 600; } span~sib-display { >div { display: flex; margin-left: 1rem; sib-multiple [name='name'] { @extend %user-role; } } } } >span:nth-child(3) { align-self: start; grid-column: 2 / span 1; grid-row: 2 / span 1; } } }