<div class="parent">
  <div class="circle">
    <img src="https://source.unsplash.com/blue-and-red-square-logo-71Qk8ODIBko" alt="" />
  </div>
  <div class="circle">
    <img src="https://source.unsplash.com/_tF3vug2FhQ" alt="" />
  </div>
  <div class="circle">
    <img src="https://source.unsplash.com/k1xf2D7jWUs" alt="" />
  </div>
  <div class="circle">
    <img src="https://source.unsplash.com/CTZhGbSxWLI" alt="" />
  </div>
  <div class="circle">
    <img src="https://source.unsplash.com/niUkImZcSP8" alt="" />
  </div>
   <div class="circle">
    <img src="https://source.unsplash.com/9Zjd7PE_FRM" alt="" />
  </div>
   <div class="circle">
    <img src="https://source.unsplash.com/_qsuER9xYOY" alt="" />
  </div>    
</div>

html {
  color-scheme: dark light;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.parent {
  position: relative;
  top:50%;
  transform:translateY(-20%);
  min-height: 100vh;
  margin-bottom:100px;

  .circle {
    --offset: 200px;
    --transformX: calc(cos(var(--degrees)) * var(--offset));
    --transformY: calc(sin(var(--degrees)) * var(--offset));
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    left: calc(var(--size) / 2);
    top: calc(var(--size) / 2);
    transform: translate(var(--transformX), var(--transformY));

    img {
      --size:120px;
      border-radius: 50%;
      width: var(--size);
      aspect-ratio: 1/0.9;
      transition:all .5s ease-in-out;
      
      &:hover {
        scale:1.2;
      }
      
      @media screen and (max-width: 580px) {
        --size:75px;
      }
    }

    @media screen and (max-width: 580px) {
      --offset: 100px;
    }

    $colors: (
      #ff5733,
      #ffbd33,
      #33ff57,
      #33a1ff,
      #b933ff,
      #ff33a1,
      #33ffbd,
      #338aff,
      #ff3333,
      #33ffa1,
      #a1ff33,
      #ff33bd
    );
    $total: 7;
    @for $i from 1 through length($colors) {
      &:nth-of-type(#{$i}) {
        --degrees: calc(#{$i} * (360deg / #{$total}));
      }
    }
  }
}