98 lines
2.1 KiB
CSS
98 lines
2.1 KiB
CSS
.container {
|
|
background-color: var(--Main-Brand-PalePeach);
|
|
margin-top: calc(var(--Spacing-x2) * -1);
|
|
margin-left: calc(var(--Spacing-x2) * -1);
|
|
margin-right: calc(var(--Spacing-x2) * -1);
|
|
margin-bottom: calc(
|
|
(var(--Spacing-x2) + 7.7rem) * -1
|
|
); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */
|
|
position: relative;
|
|
width: 100dvw;
|
|
padding: var(--Spacing-x2);
|
|
display: grid;
|
|
gap: var(--Spacing-x6);
|
|
}
|
|
|
|
.intro {
|
|
display: grid;
|
|
gap: var(--Spacing-x3);
|
|
}
|
|
|
|
.preamble {
|
|
color: var(--Base-Text-Primary-High-contrast);
|
|
font-size: var(--typography-Body-Regular-fontSize);
|
|
line-height: var(--typography-Body-Regular-lineHeight);
|
|
margin: 0;
|
|
}
|
|
|
|
.columns {
|
|
display: none;
|
|
position: relative;
|
|
}
|
|
|
|
.mobileColumns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin: 0 calc(var(--Spacing-x2) * -1);
|
|
padding-top: var(--Spacing-x2);
|
|
position: relative;
|
|
}
|
|
|
|
.columnHeaderContainer {
|
|
display: contents;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--Spacing-x2);
|
|
z-index: 2;
|
|
}
|
|
|
|
.columnHeader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Spacing-x2);
|
|
padding: var(--Spacing-x2);
|
|
}
|
|
|
|
.columnHeader:nth-child(1) {
|
|
padding-right: var(--Spacing-x1);
|
|
}
|
|
|
|
.columnHeader:nth-child(2) {
|
|
background-color: var(--Base-Background-Normal);
|
|
padding-left: var(--Spacing-x1);
|
|
border-top-left-radius: var(--Corner-radius-Medium);
|
|
}
|
|
|
|
.columnHeader:nth-child(2):has(+ .columnHeader) {
|
|
padding-left: var(--Spacing-x1);
|
|
padding-right: var(--Spacing-x1);
|
|
}
|
|
|
|
.columnHeader:nth-child(3) {
|
|
padding-left: var(--Spacing-x1);
|
|
}
|
|
|
|
@media screen and (min-width: 950px) {
|
|
.container {
|
|
margin-top: calc((var(--Spacing-x2) + 5.8rem) * -1);
|
|
margin-left: calc(var(--Spacing-x3) * -1);
|
|
margin-right: calc(var(--Spacing-x3) * -1);
|
|
margin-bottom: calc((17.5rem + var(--Spacing-x2)) * -1);
|
|
}
|
|
.mobileColumns {
|
|
display: none;
|
|
}
|
|
|
|
.columnHeaderContainer {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
.columnHeader:nth-child(2) {
|
|
border-top-right-radius: var(--Corner-radius-Medium);
|
|
}
|
|
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
margin: 0 calc(var(--Spacing-x2) * -1);
|
|
}
|
|
}
|