如何增加响应网格行中的六边形数量？

Question

我已从https://codepen.io/web-tiki/pen/HhCyd参考创建响应式六边形网格。我根据我的要求发了推文。根据style.css文件中的一些计算，根据屏幕大小，在开始时一行只需要5个六边形。请帮我增加连续的六边形并减小尺寸六角形的形状。这就是jsfiddle。 https://jsfiddle.net/fmuthewk/ 提前谢谢！

<ul id="categories" class="clr">
        <li>
            <div>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200.91789367798975 232" style="filter: drop-shadow(rgba(255, 255, 255, 0.498039) 0px 0px 10px);">
                    <path stroke="grey" stroke-width="5" fill="none" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z">
                    </path>
                </svg>
                <h1 data-toggle="modal" data-target="#myFirstModal">This is a title</h1>
                <p data-toggle="modal" data-target="#myFirstModal">Some sample text about the article this hexagon leads to</p>
            </div>
        </li>
        <li>
            <div>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="201" height="232" viewbox="0 0 200.91789367798975 232" style="filter: drop-shadow(rgba(255, 255, 255, 0.498039) 0px 0px 10px);">
                    <path fill="#9C27B0" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z"></path>
                </svg>
                <h1 data-toggle="modal" data-target="#mySecondModal">This is a title</h1>
                <p data-toggle="modal" data-target="#mySecondModal">Some sample text about the article this hexagon leads to</p>
            </div>
        </li>
        <li>
            <div>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="201" height="232" viewbox="0 0 200.91789367798975 232" style="filter: drop-shadow(rgba(255, 255, 255, 0.498039) 0px 0px 10px);">
                    <path fill="#C51162" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z"></path>
                </svg>
                <h1 data-toggle="modal" data-target="#myThirdModal">This is a title</h1>
                <p data-toggle="modal" data-target="#myThirdModal">Some sample text about the article this hexagon leads to</p>
            </div>
        </li>

</ul>