Создание адаптивного изображения

[ket-verbitskaya]

Привет!
Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них.
Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX
 

<div class="wrapper">
    <div class="circle">
        <div class="panel panel--1">
        
        </div>
        <div class="panel panel--2">
        
        </div>
        <div class="panel panel--3">
       
        </div>
        <div class="panel panel--4">
        
        </div>
        <div class="circle--2">
        
        </div>
    </div>
</div>

 

* {
  box-sizing: border-box;
}
body {
  background-color: #2b2b2b;
}
.wrapper {
  background-color: #2b2b2b;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle {
  height: 29vw;
  width: 29vw;
  border-radius: 50%;
  position: absolute;
  transform: rotateZ(25deg);
  background-color: #333333;
}
.panel {
  height: 17.5vw;
  width: 17.5vw;
  border-radius: 50%;
  border: 1.5vw solid #f14100;
}
 
.panel--1 {
  float: left;
  position: absolute;
}
.panel--2 {
  float: right;
  position: relative;
}
.panel--3 {
  bottom: 0;
  position: absolute;
}
.panel--4 {
  bottom: 0;
  right: 0;
  position: absolute;
}
.circle--2 {
  border: 1.5vw solid #f14100;
  position: relative;
  border-radius: 50%;
  height: 25vw;
  width: 25vw;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  outline: 10vw solid #2b2b2b;
}