卡布局中的内容在移动视图中不会缩小

Question

我刚开始使用 Tailwind CSS 。而且，我尝试使用 flexbox 制作一些卡片布局（每个上带有VG图标和文字）响应。调整屏幕大小时，它会缩小，直到碰到 SM屏幕。然后，仅可见卡高度的大约 60％。

我不确定是否应该将卡的内容（例如图标和文字）缩小到移动设备上，还是应该自动缩小？

这是我的代码：

<main class="h-screen-90 flex flex-col items-center h-64">
            <div>
                <h1 class="text-center text-4xl lg:text-5xl text-white font-normal">no-more spending hours
                    <br> on desk research or
                    <br>Powerpoint visuals</h1>
                <hr class="w-48 border-t-4 border-red-light">
                <h3 class="text-center text-2xl text-white font-medium">Do what you do. Best</h3>
            </div>
            <div class="inline-flex flex-col md:flex-row mt-auto justify-center">
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-8 max-w-sm rounded overflow-hidden shadow-lg bg-purple-darker">
                    <i class="fas fa-chalkboard text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-white font-bold text-xl">BUSINESS PRESENTATIONS</div>
                    </div>
                </div>
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-14 max-w-sm rounded overflow-hidden shadow-lg bg-teal">
                    <i class="fas fa-search text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-center text-white font-bold text-xl">BUSINESS RESEARCH
                            <br>SERVICES</div>
                    </div>
                </div>
                <div class="flex-auto text-center mx-4 my-4 md:my-0 pt-24 px-7 max-w-sm rounded overflow-hidden shadow-lg bg-red-light ">
                    <i class="fas fa-brush text-white text-6xl"></i>
                    <div class="py-12">
                        <div class="text-center text-white font-bold text-xl">UNLIMITED OFF-THE-RACK
                            <br>DESIGNER SLIDES</div>
                    </div>
                </div>
            </div>
        </main>