[MWPW-183800]New brick block variation
Create new variation media-visible-mobile-tablet to brick block
Following enhancements are added to the new variation
- Increase the minimum height for desktop (greater that 1200px) to 500px.
- Ensure media remains visible on both mobile and tablet.
- Introduce additional tablet breakpoints: up to 920px, the layout will match desktop with a 50/50 split between copy and media, and a minimum height of 384px.
- Below 920px, the media will stack beneath the text. Media will have a maximum height of 480px, and the copy container will flex to fit its content while maintaining padding.
This variation will also support setting focal points for the foreground image, using the following tokens:
- media-cover-left – protects the left side, crops from the right
- media-cover-right – protects the right side, crops from the left
- media-cover-top – protects the top, crops from the bottom
- media-cover-bottom – protects the bottom, crops from the top
These focal points apply globally and will not change per breakpoint. For example, if media-cover-left is set, the left side will be protected across all viewports.
Resolves: MWPW-183800 MWPW-184270
Test URLs:
- Before: https://main--milo--adobecom.aem.page/drafts/ruchika/brick?martech=off
- After: https://brick-enhancement--milo--adobecom.aem.page/drafts/ruchika/brick?martech=off
Testing Notes:
- All changes are done to a new brick block variation only so no breaking changes expected for existing variations. But please do a sanity heck.
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch. In case there are problems, just click the checkbox below to rerun the respective action.
- [ ] Re-sync branch
Closing this PR as the code for brick block with new variation will move to mep folder so that it is not available for all the users and added specifically to DC pages via mep.
I will raise the separate PR for that shortly. cc @spadmasa @dstrong23