How to create responsive CSS arcs

I'm trying to create an image effect that will display an segment of a circle around and image. It has to be responsive and I'd like to be able to control the rotation of the segment as well.
Here is an example:

I've tried looking as svgs and clip paths but it all turns into such a mess. Is this possible to do?

.wrapper {
  padding: 100px 0;
  background-color: #00213B;
  ;
}

.slide-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 85%;
  column-gap: 2.5rem;
  margin-top: 3.5rem;
  margin: 0 auto;
}

.slide-wrapper .content {
  width: 70%;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

.slide-wrapper .content .name {
  font-weight: 900;
  margin-top: 2rem;
}

.slide-wrapper .image {
  position: relative;
  width: 212px;
  height: 212px;
  margin-left: 1rem;
  border-radius: 50%;
}

.slide-wrapper .image .els {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.slide-wrapper .image .els::before {
  content: "";
  position: absolute;
  background-color: #00182a;
  width: 108%;
  height: 108%;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.slide-wrapper .image .els::after {
  content: "";
  position: absolute;
  background-color: #8DC63F;
  width: 116%;
  height: 116%;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.slide-wrapper .image img {
  border-radius: 50%;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  position: relative;
  z-index: 5;
  background-color: #00182a;
}

<div class="wrapper">
  <div class="slide-wrapper">
    <div class="image">
      <div class="els">
      </div>
      <img src="https://png.pngtree.com/png-vector/20230831/ourmid/pngtree-man-avatar-image-for-profile-png-image_9197908.png"
                    alt="">
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua.
      <div class="name">-John Doe
      </div>
    </div>
  </div>
</div>

Link to codepen

Solution

Obviously the other answers are great and what I'd use too if the design called for arcs of varying lengths.

In this specific case, if you just want to "control the rotation of the segment" as stated in the question (versus the length of the arc), you could also create this kind of stylized design with a border.

.wrapper {
  padding: 100px 0;
  background-color: #00213b;
}

.slide-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 85%;
  column-gap: 2.5rem;
  margin-top: 3.5rem;
  margin: 0 auto;
}

.slide-wrapper .content {
  width: 70%;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

.slide-wrapper .content .name {
  font-weight: 900;
  margin-top: 2rem;
}

.slide-wrapper .image {
  position: relative;
  width: 212px;
  height: 212px;
  margin-left: 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.slide-wrapper .image .els {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.slide-wrapper .image .els::after {
  content: "";
  position: absolute;
  border: 0.5rem solid #8dc63f;
  border-bottom-color: transparent;
  rotate: -45deg;
  width: calc(100% + 1rem);
  aspect-ratio: 1;
  border-radius: 50%;
}

.slide-wrapper .image img {
  border-radius: 50%;
  width: 100%;
  height: auto;
  border: 1px solid #fff;
  position: relative;
  z-index: 5;
  background-color: #00182a;
}

<div class="wrapper">
  <div class="slide-wrapper">
    <div class="image">
      <div class="els"></div>
      <img src="https://png.pngtree.com/png-vector/20230831/ourmid/pngtree-man-avatar-image-for-profile-png-image_9197908.png"
           alt="">
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
      dolore magna aliqua.
      <div class="name">-John Doe
      </div>
    </div>
  </div>
</div>