Circle of trust (circular layout)

<div class="circle">
  <img
    src="img/peep-1.svg"
    alt="person 1"
    class="circular-item item"
    style="--i: 1; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-2.svg"
    alt="person 2"
    class="circular-item item"
    style="--i: 2; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-3.svg"
    alt="person 3"
    class="circular-item item"
    style="--i: 3; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-4.svg"
    alt="person 4"
    class="circular-item item"
    style="--i: 4; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-5.svg"
    alt="person 5"
    class="circular-item item"
    style="--i: 5; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-6.svg"
    alt="person 6"
    class="circular-item item"
    style="--i: 6; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-7.svg"
    alt="person 7"
    class="circular-item item"
    style="--i: 7; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-8.svg"
    alt="person 8"
    class="circular-item item"
    style="--i: 8; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-9.svg"
    alt="person 9"
    class="circular-item item"
    style="--i: 9; --angle: calc(var(--i) * (360deg / var(--number-of-trusted-people)))"
  /><img
    src="img/peep-10.svg"
    alt="person 10"
    class="item untrusted"
  />
  <img
    src="img/peep-11.svg"
    alt="person 11"
    class="central item"
  />
   <img
    src="img/peep-12.svg"
    alt="person 12"
    class="item untrusted"
  />
</div>

:root {
  --number-of-trusted-people: 9;
  --item-size: 10cqw;

  /* we subtract the point size to place items within circle */
  --adjusted-center: calc(50% - (var(--item-size) / 2));
}

.circle {
  width: 80%;
  max-width: 700px;
  aspect-ratio: 1 / 1;

  container-type: inline-size;
  container-name: circle;

  border-radius: 50%;

  position: relative;
}

.circular-item {
  --angle: 0deg;

  --x: calc(var(--adjusted-center) * cos(var(--angle)));
  --y: calc(var(--adjusted-center) * sin(var(--angle)));

  /* position point at center of circle with radius. We add x and y values to move to edge of circle. */
  top: calc(var(--adjusted-center) + var(--y));
  left: calc(var(--adjusted-center) + var(--x));
}

.item {
  position: absolute;

  width: var(--item-size);
  height: var(--item-size);

  border-radius: 50%;
  background-color: hsl(64, 70%, 70%);
}

.central {
  top: var(--adjusted-center);
  left: var(--adjusted-center);

  background-color: hsl(64, 100%, 80%);

  border: 0.25rem double hsl(0, 0%, 0%, 0.6);
}

.untrusted {
  background-color: hsl(12, 70%, 70%);
}

img:nth-child(1 of .untrusted) {
  top: -7%;
  left: 13%;
}

img:nth-child(2 of .untrusted) {
  bottom: 1%;
  right: -2%;
}

/* general styles  */

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;

  min-height: 100dvh;
  margin: 0;
}