Refine the docs homepage card grid to be responsive on extra-small screens

[hwhsu1231]

Description

Change the Sphinx .. grid:: directive on the docs homepage from 2 (or 2 2 2 2) to 1 2 2 2. The four-column syntax means:

• 1^st value -> 1 column on the extra-small screen (<576px) (mobile)
• 2^nd value -> 2 columns on the small screen (768px) (tablet portrait)
• 3^rd value -> 2 columns on the medium screen (992px) (tablet landscape)
• 4^th value -> 2 columns on the large screen (>1200px) (desktop)

based on the sphinx-design documentation:

A grid directive can be set with the number of default columns (1 to 12); either a single number for all screen sizes, or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px), then child grid-item directives should be set for each item.

Motivation

On phone-sized screens the four grid-item cards (User Guide, Examples, API Documentation, Contributor's Guide) currently render side-by-side in two columns. The cards become very narrow, making text hard to read and the layout feel cramped.

A single-column mobile layout gives each card full width, improving readability without affecting tablet or desktop users.

Possible Implementation

In docs/index.rst line 42, replace:

.. grid:: 2

with:

.. grid:: 1 2 2 2

Additional context