Фигура плавает при адаптиве, как решить вопрос?

![Необходимо чтоб фигура (круг) при адаптиве не смещалсь и оставалась на линии, сейчас она вот так отображается]

А нада вот так:

Вот такой код у меня на данный момент

 <div class="team__wrapper">
   <div class="team__fig figure-1">

   </div>
   <img src="img/team/background-2.png" alt="back2">
 </div>

.team {
    position: relative;
    padding: 147px 0 493px 0;
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(../img   /team/background-1.jpg) center center no-repeat;
    background-size: auto, auto;
    background-size: cover;
}
.team__wrapper {
    position: relative;
    bottom: 0;
}
.team__wrapper img {
    width: 100%;
}
.team__fig {
    position: absolute;
    width: 68px;
    height: 68px;
    box-sizing: border-box;
    border: 2px solid #e74c3c;
    border-radius: 50%;
    top: 313px;
    left: 315px;
}

Подскажите как верстаются такие блоки ?