diff --git a/src/features/navigation/components/Navigation.tsx b/src/features/navigation/components/Navigation.tsx
index 067e470..30e6b6a 100644
--- a/src/features/navigation/components/Navigation.tsx
+++ b/src/features/navigation/components/Navigation.tsx
@@ -24,18 +24,18 @@ const Navigation = () => (
-
+
-
+
-
+
diff --git a/src/features/shows/components/card/TallCardCollection.tsx b/src/features/shows/components/card/TallCardCollection.tsx
index 4f3dca5..ef16af1 100644
--- a/src/features/shows/components/card/TallCardCollection.tsx
+++ b/src/features/shows/components/card/TallCardCollection.tsx
@@ -15,6 +15,18 @@ const StyledWrapper = styled(({ scroll, ...props }: WrapperProps) => (
padding: ${({ theme }) => theme.spacing(1)};
border-radius: ${({ theme }) => theme.shape.borderRadius}px;
margin-inline: -${({ theme }) => theme.spacing(0.75)};
+ background-image: linear-gradient(to right, white, white),
+ linear-gradient(to right, white, white),
+ linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0)),
+ linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0));
+
+ background-position: left center, right center, left center, right center;
+ background-repeat: no-repeat;
+ background-color: white;
+ background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+
+ /* Opera doesn't support this in the shorthand */
+ background-attachment: local, local, scroll, scroll;
${({ theme, scroll }) =>
scroll