Change Feature Card Image Size on Home and Landing Pages to 16x9

Issue description

Request: Change the image size of the 3 Feature Card Row on Home and Landing Pages to a 16x9 image from 4x3 image.

Context: as part of preparation for the upcoming Redesign Release 3, the team conducted a design phase that included creation of a 3 Feature Card Row to be used on Mini Landing Pages (MLPs). It was determined we will use a 16x9 image on the MLPs for all breakpoints in order to reduce wasted vertical space. It was determined to be advantageous to make this same change on the 3 Feature Card Row for Home and Landing Pages which currently use a 4x3 image, making the component taller and pushing down content on the page which is garnering negative feedback. By making this change, it will also save us time in the future when we create the 3 Feature Card Row for MLPs.

NOTES

Documentation on the Drupal Guide on MyNCI should be updated accordingly after this change is made.
Approved by Anna/Alex via email on 06/11/24.

What's the expected change?

The 3 Feature Card Row on Home and Landing Pages will use a 16x9 image as opposed to a 4x3.

What's the current functionality?

The 3 Feature Card Row on Home and Landing Pages uses a 4x3 image.

Updated Acceptance Criteria

Adding Feature Cards to Home & Landing Page

Scenario: A content editor adds a Feature Card Row to a Home & Landing Page on the CMS
  Given a content editor is logged into the CMS
    And they are creating or editing a Home & Landing Page
  When they add a Feature Card Row to the Home & Landing Page
  Then there will be no change to the user experience from the current functionality

Viewing a Home & Landing Page with a Feature Card Row

Scenario: A site visitor views a Home & Landing Page that has a Feature Card Row on it
  Given a site visitor is on a Home & Landing Page
    And the Home & Landing Page they are visiting has a Feature Card Row
    And the Feature Card Row has an Internal Feature Card, and External Feature Card, and a Multimedia Card to test all use cases
  When the feature cards have Override Images added
  Then the override image will appear on the feature card at an aspect ratio of 16:9 for all breakpoints above mobile large (breakpoint > 639px)
  When the internal feature card and multimedia feature card have no override image
  Then the internal feature card's and multimedia feature card's respective promotional images will appear on the the respective cards at an aspect ratio of 16:9 for all breakpoints above mobile large (breakpoint > 639px)
  When the breakpoint is less than tablet (640px > breakpoint)
  Then no image will be displayed on the feature card
  When the breakpoint is greater than tablet (breakpoint > 879px) 
  Then the cards will be horizontally aligned with image aspect ratios of 16:9 each
  When the breakpoint is less than tablet large (880px > breakpoint)
  Then the cards will be vertically stacked with image aspect ratios of 16:9 each

NCIOCPL / cgov-digital-platform