USP cards on landing page have unequal heights in some resolutions

[NishantSinghhhhh]

Page URL

https://precice.org/

What is wrong?

Description

On the landing page, the 4 USP (Unique Selling Point) cards in the
"Prepared for the next generation..." section have unequal heights.

Cards with less content appear shorter than those with more content,
making the layout look inconsistent.

Expected behavior

All 4 cards in the same row should have equal heights regardless of content length.

Actual behavior

Cards have different heights based on their content (see screenshot).

Location

Landing page → "Prepared for the next generation of multi-physics simulations" section
File: content/index.html

[NishantSinghhhhh]

@MakisH Here are the changes made to fix the USP cards layout:

• Added display: flex and flex-wrap: wrap to .row.equal inside
  @media (max-width: 992px) in css/landing-page.css so the row
  behaves as a flex container on mobile.

• Added display: flex, flex-direction: column, and width: 100%
  to .row.equal > .col-flex so each card column stretches to equal
  width and height on mobile.

• Added height: 100% to div.panel.usp so cards fill their parent
  column fully, making all USP cards in the same row equal height
  regardless of content length.

I will raise a PR for this once I have the necessary permissions.

Screencast.from.2026-03-22.17-35-13.webm

[MakisH]

Thanks for the report. The image and video do not load. (edit: they loaded now)

This seems to only affect a short range of unusual resolutions. Example:

In the full width, all boxes have the same height.

I don't think this is a bug, but happy to review improvements after the GSoC proposals have been processed and PRs open again.

[NishantSinghhhhh]

Okay sir understood

[precice-bot]

This issue has been mentioned on preCICE Forum on Discourse. There might be relevant details there:

https://precice.discourse.group/t/gsoc-2026-nishant-singh/2799/2