Merge pull request #14189 from guardian/doml/hide-trails-mobile-fronts

Hide trails on fronts on small screens

Author: domlander

dotcom-rendering/src/components/Card/components/TrailText.tsx

@@ -4,6 +4,7 @@ import {
 	space,
 	textSans14,
 	textSans17,
+	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
 import { palette } from '../../../palette';
@@ -13,6 +14,10 @@ export type TrailTextSize = 'regular' | 'large';
 const trailTextStyles = css`
 	display: flex;
 	flex-direction: column;
+
+	${until.tablet} {
+		display: none;
+	}
 `;
 
 const bottomPadding = css`

dotcom-rendering/src/components/FeatureCard.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { from, space } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import { Hide, SvgMediaControlsPlay } from '@guardian/source/react-components';
 import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat';
 import { secondsToDuration } from '../lib/formatTime';
@@ -127,7 +127,6 @@ const immersiveOverlayContainerStyles = css`
  * reduced.) The following article has more detail on non-linear gradients:
  * https://css-tricks.com/easing-linear-gradients/
  */
-
 const overlayMaskGradientStyles = (angle: string) => css`
 	mask-image: linear-gradient(
 		${angle},
@@ -201,6 +200,10 @@ const starRatingWrapper = css`
 
 const trailTextWrapper = css`
 	margin-top: ${space[3]}px;
+
+	${until.tablet} {
+		display: none;
+	}
 `;
 
 const videoPillStyles = css`