Improve `qiskit-card` when on mobile

[Eric-Arellano]

Motivation

We have a custom .. qiskit-card:: directive that Sphinx users can write to create a card element:

https://github.com/Qiskit/qiskit_sphinx_theme/blob/43d744242947cdc54d5a6f281b51a3acec92a571/example_docs/docs/sphinx_guide/custom_directives.rst?plain=1#L32-L42

That results in this style:

https://github.com/Qiskit/qiskit_sphinx_theme/blob/43d744242947cdc54d5a6f281b51a3acec92a571/tests/js/qiskit.test.js-snapshots/custom-directives-1-linux.png

https://github.com/Qiskit/qiskit_sphinx_theme/blob/43d744242947cdc54d5a6f281b51a3acec92a571/tests/js/qiskit.test.js-snapshots/custom-directives-3-linux.png

But these aren't fully complying with Carbon. While it was "good enough" for Furo 1.0, we'd like to better align with Carbon and qiskit.org. We especially want to improve the mobile design. See https://github.com/Qiskit/qiskit_sphinx_theme/pull/447#discussion_r1250583747.

How to try out the current setup

Follow https://github.com/Qiskit/qiskit_sphinx_theme/blob/main/CONTRIBUTING.md#run-locally and specifically use tox -e qiskit. In the example site in your browser, navigate to Custom Directives

~# Approach 1: use a web component~

~This is probably the best option. Follow the guide at https://github.com/Qiskit/qiskit_sphinx_theme/blob/main/CONTRIBUTING.md#updating-bundled-web-components for adding new web components.~

~For step 4, you will update the HTML here to instead be the new HTML element:~

https://github.com/Qiskit/qiskit_sphinx_theme/blob/43d744242947cdc54d5a6f281b51a3acec92a571/src/qiskit_sphinx_theme/directives.py#L51-L57

~See how we do the top nav bar for inspiration:~

https://github.com/Qiskit/qiskit_sphinx_theme/blob/43d744242947cdc54d5a6f281b51a3acec92a571/src/qiskit_sphinx_theme/theme/qiskit-sphinx-theme/page.html#L14-L16

~You'll also want to remove our custom code in _custom-directives.scss for qiskit-card.~

Approach 2: improve our styling to align with Carbon

This looks like changing the code in _custom-directives.scss, and possibly the HTML in directives.py, to better align the style with Carbon.

You'll probably want to look at the underlying HTML and CSS from Carbon. Note that I did not do this. I based all the current code on the old Pytorch code for cards, which was custom.

Reminder to use tox -e qiskit every time you make a change to see how it renders.

[y4izus]

On-hold until we know exactly what happens with qiskit docs

[Eric-Arellano]

Given that we are deprioritizing the qiskit theme and focusing on Qiskit Ecosystem, this is less important. The current implementation is "Carbon-compliant" enough for the Ecosystem.