尝试响应式地以向下箭头布局显示五个旋转图像

Question

我必须制作一个全屏页面（无滚动），其中包含一些内容和一些旋转 45 度的图像，形成一个向下的箭头。

问题是，我不知道如何使它适用于所有屏幕尺寸（768 像素以上），而且图像占用太多空间，所以最终会触及内容。

这是我想要实现的一个例子：

代码如下：

https://codepen.io/darioaladuz/pen/qBMGqzW

.content {
text-align: center;
padding: 16px;
}

.papi {
margin: 0 auto;
height: 400px;
width: 400px;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
transform: rotate(45deg);
gap: 8px;
}

.papi > div {
width: calc(400px / 3);
height: calc(400px / 3);
aspect-ratio: 1/1;
border: 3px solid red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #fff;
transition: 0.3s ease-in-out;
}

.papi > div:hover {
transform: scale(1.05);
background-color: pink;
}

.papi > div > * {
transform: rotate(-45deg);
}

.one {
grid-area: 3/1/4/2;
}

.two {
grid-area: 2/2/3/3;
}

.three {
grid-area: 1/3/2/4;
}

.four {
grid-area: 3/2/4/3;
}

.five {
grid-area: 2/3/3/4;
}

.six {
grid-area: 3/3/4/4;
}`

我尝试用 CSS Grid 制作一个正方形，如果我旋转每个图像，它看起来很糟糕。如果我旋转包含图像的网格，它看起来不错，但占用太多空间。

我也试过制作三排但得到相同的结果。

最后，我尝试给网格一个容器，这在一定程度上有所帮助，但仍然存在问题。