сами ромбики можно сделать так:
div {
margin: 27px 0;
width: 100px;
height: 55px;
background: #F1CCAE;
position: relative;
}
div:before, div:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;
}
div:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;
}
Для мобильных поясняющий текст к иконке можно убрать и показывать его при наведении на иконку.
И разместить в три столбца: в левом три шестиугольника друг под другом, в среднем - верхний - центральный шестиугольник уменьшенного размера-нижний , в правом - оставшиеся три шестиугольника. В этом случае позиционированием можно не пользоваться, а разметить страницу на 3 блока по 33.3333333333%, внутри которых будут размещены одинаковые многоугольники. И конечно же сначала делать верстку под мобильные устройства.