Per T238282#5666593, make the article card in the Suggested edits module display more responsively according to the width of the module container to accommodate mobile tablet users.
Looking at T238279#5680536, the the article card and content inside the Suggested edits module should also display more responsively on Desktop for when the module is narrower than 360px.
=== Proposed design:
**A) Larger Mobile devices**
Utilize media queries to detect when the width of the module is ≥ 600px, increase the card dimensions to image size at 512x256px.
{F31123298}
**B) Narrow widths**
Utilize media queries to detect when the width of the module becomes too narrow, and shift the style and position of the left and right arrows to be as follows:
{F31123216}
Achieved by applying the following CSS tweaks:
```
@media screen and (max-width: 1280px) and (min-width: 1024px) {
.suggested-edits-previous {
border: solid 1px #C8CCD1;
margin-right: -24px;
background-color: #F8F9FA;
z-index: 1000;
padding-right: 0!important;
padding-left: 0.42857143em!important; /* this offsets the uneven spacing between arrows and card caused by the .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child */
border-radius: 2px;
margin-bottom: 24px;
}
}
@media screen and (max-width: 1280px) and (min-width: 1024px) {
.suggested-edits-next {
border: solid 1px #C8CCD1;
margin-left: -24px;
z-index: 1000;
background-color: #f8f9fa;
padding-right: 0!important;
padding-left: 0.42857143em!important; /* this offsets the uneven spacing between arrows and card caused by the .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child */
border-radius: 2px;
margin-bottom: 24px;
}
}
```