diff --git a/components/Blocks/CarouselCards/carouselCards.module.css b/components/Blocks/CarouselCards/carouselCards.module.css index ce54e5fe4..73175b9ad 100644 --- a/components/Blocks/CarouselCards/carouselCards.module.css +++ b/components/Blocks/CarouselCards/carouselCards.module.css @@ -1,3 +1,3 @@ .navigationButton { - top: 30%; + top: 25%; } diff --git a/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css b/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css index d67f53c63..7b332ad59 100644 --- a/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css +++ b/components/Blocks/FullWidthCampaign/fullWidthCampaign.module.css @@ -4,6 +4,20 @@ height: 100vh; } +.container::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.36) 50%, + rgba(0, 0, 0, 0.75) 100% + ); + pointer-events: none; + z-index: 1; +} + @media screen and (min-width: 768px) { .container { height: 880px; @@ -21,6 +35,7 @@ margin: 0 auto; gap: var(--Spacing-x1); padding: var(--Spacing-x4) var(--Spacing-x3); + z-index: 2; } .mainContent { @@ -35,9 +50,20 @@ gap: var(--Spacing-x1); } +.buttonWrapper { + min-width: 180px; +} + +@media screen and (max-width: 767px) { + .buttonWrapper:not(:only-child) { + min-width: 135px; + } +} + .image { max-width: 100%; height: 100%; + z-index: 0; } .scriptedText { diff --git a/components/Blocks/FullWidthCampaign/index.tsx b/components/Blocks/FullWidthCampaign/index.tsx index ff7ac7846..e4881c1ff 100644 --- a/components/Blocks/FullWidthCampaign/index.tsx +++ b/components/Blocks/FullWidthCampaign/index.tsx @@ -48,7 +48,14 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
{content.has_primary_button ? ( -