Items on a circle - sass

Question

I'm trying to put hexagons made with CSS around a circle. I already got the circle and the hexagons (they are stocked on top of each other), I just can't get the code of organizing them to work (it's on the CSS part of the code). http://imgur.com/Sv82DB0 (I'm aiming this effect).
$darkPrimary: #ffa000;
$primaryYellow: #ffc107;
$lightPrimaryColor: #ffecb3;
$darkGray: #212121;
$redOrange: #ff5722;
$lightGray: #757575;
$dividerColor: #bdbdbd;
// $rot // rotation for the current item
$nb-items: 4;
$angle: (360deg / $nb-items); // angle between two items
// $nb-items // number of item
$rot: 0;
$circle-size: 21.875em;
#mixin placingElements () {
#for $i from 1 through $nb-items {
.shapes__circle:nth-child(#{$i}) {
// Rotate the axis
rotate: ($rot * 1);
// Move the item from the center
translate: $circle-size / 2;
// Rotate the item back to its default position
rotate: ($rot * -1);
}
$rot: $rot+$angle;
}
//Increments the '$rot' variable for the next item
}
.shapes {
position: absolute;
display: block;
margin-left: 30px;
&__circle {
#include placingElements();
position: relative;
top: 60px;
border: 19px solid $primaryYellow;
border-radius: 50%;
box-shadow: 0 0 1px 0 rgb(255, 255, 255);
width: 350px;
height: 350px;
z-index: 1;
}
&__hexagon {
width: 120px;
height: 80px;
background: $redOrange;
position: absolute;
top: -50px;
left: 90px;
margin: 10px auto;
z-index: 2;
&::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 45px solid $redOrange;
}
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 45px solid $redOrange;
}
&--inside-img {
position: absolute;
height: 55px;
width: 55px;
left: 25%;
top: 32%;
}
&--inside-text {
position: absolute;
top: -14%;
left: 5%;
font-family: 'Overpass Mono', monospace;
font-size: 1rem;
color: $darkGray;
font-weight: 600;
}
}
}
<div class="shapes__circle">
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
</div>
<!-- __section-img--circle -->