<div class="grid">
<img class="grid-item" src="">
<img class="grid-item" src="">
<img class="grid-item" src="">
<img class="grid-item" src="">
<img class="grid-item" src="">
</div>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 2px;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) { grid-column: span 3; }
.grid-item:nth-child(3),
.grid-item:nth-child(4),
.grid-item:nth-child(5) { grid-column: span 2; }
(min-width: 1024px)
(max-width: 1023px)
@for $i from 0 through 60 {
$angle: 180 / 60 * $i * 1deg;
.radial-progress[data-progress="#{$i}"] .circle-block .fill,
.radial-progress[data-progress="#{$i}"] .circle-block .mask.full {
transform: rotate($angle);
}
.radial-progress[data-progress="#{$i}"] .circle-block .fill.fix {
transform: rotate($angle * 2);
}
.radial-progress[data-progress="#{$i}"] .inset .percentage .numbers {
width: 100%;
}
}