diff --git a/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css b/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css index 02984b0f1..d7b3bd729 100644 --- a/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css +++ b/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css @@ -1,6 +1,5 @@ .rewardCard { padding-bottom: var(--Spacing-x-one-and-half); - z-index: 2; grid-column: 1/3; } diff --git a/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index dbab394c3..f61e97546 100644 --- a/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/components/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -28,7 +28,6 @@ display: contents; grid-template-columns: 1fr 1fr; gap: var(--Spacing-x2); - z-index: 2; } .columnHeader { diff --git a/components/ContentType/ContentPage/contentPage.module.css b/components/ContentType/ContentPage/contentPage.module.css index c0c94aa42..825a2445d 100644 --- a/components/ContentType/ContentPage/contentPage.module.css +++ b/components/ContentType/ContentPage/contentPage.module.css @@ -1,7 +1,5 @@ .contentPage { padding-bottom: var(--Spacing-x9); - container-name: content-page; - container-type: inline-size; } .header { @@ -35,12 +33,16 @@ .contentContainer { display: grid; - padding: var(--Spacing-x4) var(--Spacing-x2) 0; + grid-template-areas: + "main" + "sidebar"; gap: var(--Spacing-x4); align-items: start; + padding: var(--Spacing-x4) var(--Spacing-x2) 0; } .mainContent { + grid-area: main; display: grid; gap: var(--Spacing-x4); width: 100%; @@ -57,6 +59,7 @@ padding: var(--Spacing-x4) 0; } .contentContainer { + grid-template-areas: "main sidebar"; grid-template-columns: var(--max-width-text-block) 1fr; gap: var(--Spacing-x9); max-width: var(--max-width-content); diff --git a/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/components/ContentType/LoyaltyPage/loyaltyPage.module.css index d21b48d68..76ab24efa 100644 --- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css +++ b/components/ContentType/LoyaltyPage/loyaltyPage.module.css @@ -1,21 +1,24 @@ .content { display: grid; - padding-bottom: var(--Spacing-x9); - padding-left: var(--Spacing-x0); - padding-right: var(--Spacing-x0); - - container-name: loyalty-page; - container-type: inline-size; + grid-template-areas: "main"; + grid-template-columns: 1fr; + gap: var(--Spacing-x5); + padding: 0 var(--Spacing-x2) var(--Spacing-x9); max-width: var(--max-width); margin: 0 auto; width: 100%; } +.content:has(> aside) { + grid-template-areas: + "main" + "sidebar"; +} + .blocks { + grid-area: main; display: grid; gap: var(--Spacing-x7); - padding-left: var(--Spacing-x2); - padding-right: var(--Spacing-x2); } .header { @@ -25,23 +28,16 @@ @media screen and (min-width: 1367px) { .content { - gap: var(--Spacing-x5); - padding-left: var(--Spacing-x5); - padding-right: var(--Spacing-x5); + padding: 0 var(--Spacing-x5) var(--Spacing-x9); } .content:has(> aside) { + grid-template-areas: "sidebar main"; grid-template-columns: 360px 1fr; } - .content:has(> aside) .blocks { - grid-column: 2 / -1; - } - .blocks { gap: var(--Spacing-x9); - padding-left: var(--Spacing-x0); - padding-right: var(--Spacing-x0); } .blocks > section:first-of-type > header { diff --git a/components/Sidebar/sidebar.module.css b/components/Sidebar/sidebar.module.css index f30a1ea39..55d4f555b 100644 --- a/components/Sidebar/sidebar.module.css +++ b/components/Sidebar/sidebar.module.css @@ -1,5 +1,7 @@ .aside { + grid-area: sidebar; display: grid; + gap: var(--Spacing-x4); container-name: sidebar; container-type: inline-size; gap: var(--Spacing-x3); @@ -16,14 +18,7 @@ .aside { align-content: flex-start; gap: var(--Spacing-x4); - border-top: 0; padding-top: 0; } } - -@container loyalty-page (max-width: 1366px) { - .aside { - display: none; - } -}