.circleCarousel {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.circle {
  --size: 195vw;
  --img-width: 20.555vw;
  --img-height: 25.6944vw;
  --radius: calc((var(--size) - var(--img-height)) / 2);
  --rotation: 0deg;
  width: var(--size);
  min-width: 600px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 25%;
  left: calc(50% - var(--size) / 2);
  rotate: calc(-90deg + var(--rotation));
  transition: rotate 2s cubic-bezier(0.55, 0, 0.1, 1);
}

.image {
  --index: 0;
  --step: calc(360deg / var(--items));
  --offset: 250px;
  --angle: calc(var(--step) * var(--index));
  --difference: calc((var(--img-height) - var(--img-width)) / 2);
  --x: calc( var(--difference) + var(--radius) + var(--radius) * cos(var(--angle)));
  --y: calc( var(--radius) + var(--radius) * sin(var(--angle)));
  background: #ccc;
  width: var(--img-width);
  height: var(--img-height);
  position: absolute;
  left: var(--x);
  top: var(--y);
  background: url("https://i.ibb.co/jwjB01C/Screenshot-2023-06-12-at-11-36-16-PM.png");
  background-size: cover;
  background-position: center center;
  transform-origin: center center;
  rotate: calc(var(--angle) + 90deg);
}