:root {
    --16-bold-font-family: "Space Grotesk", Helvetica;
    --16-bold-font-weight: 700;
    --16-bold-font-size: 16px;
    --16-bold-letter-spacing: 0px;
    --16-bold-line-height: 24px;
    --16-bold-font-style: normal;
    --16-regular-font-family: "Space Grotesk", Helvetica;
    --16-regular-font-weight: 400;
    --16-regular-font-size: 16px;
    --16-regular-letter-spacing: 0px;
    --16-regular-line-height: 24px;
    --16-regular-font-style: normal;
    --56-bold-font-family: "Space Grotesk", Helvetica;
    --56-bold-font-weight: 700;
    --56-bold-font-size: 56px;
    --56-bold-letter-spacing: 0px;
    --56-bold-line-height: 56px;
    --56-bold-font-style: normal;
    --24-regular-font-family: "Space Grotesk", Helvetica;
    --24-regular-font-weight: 400;
    --24-regular-font-size: 24px;
    --24-regular-letter-spacing: 0px;
    --24-regular-line-height: 32px;
    --24-regular-font-style: normal;
    --16-BOLD-UP-font-family: "Space Grotesk", Helvetica;
    --16-BOLD-UP-font-weight: 700;
    --16-BOLD-UP-font-size: 16px;
    --16-BOLD-UP-letter-spacing: 0px;
    --16-BOLD-UP-line-height: 24px;
    --16-BOLD-UP-font-style: normal;
    --16-REGULAR-font-family: "Space Grotesk", Helvetica;
    --16-REGULAR-font-weight: 400;
    --16-REGULAR-font-size: 16px;
    --16-REGULAR-letter-spacing: 0px;
    --16-REGULAR-line-height: 24px;
    --16-REGULAR-font-style: normal;
    --button-56-XL-font-family: "Space Grotesk", Helvetica;
    --button-56-XL-font-weight: 700;
    --button-56-XL-font-size: 56px;
    --button-56-XL-letter-spacing: -1.2799999713897705px;
    --button-56-XL-line-height: 51.22999954223633px;
    --button-56-XL-font-style: normal;
    --90-bold-font-family: "Space Grotesk", Helvetica;
    --90-bold-font-weight: 700;
    --90-bold-font-size: 90px;
    --90-bold-letter-spacing: -2.4000000953674316px;
    --90-bold-line-height: 96px;
    --90-bold-font-style: normal;
    --24-bold-font-family: "Space Grotesk", Helvetica;
    --24-bold-font-weight: 700;
    --24-bold-font-size: 24px;
    --24-bold-letter-spacing: 0px;
    --24-bold-line-height: 32px;
    --24-bold-font-style: normal;
    --16-regular-b-font-family: "Space Grotesk", Helvetica;
    --16-regular-b-font-weight: 400;
    --16-regular-b-font-size: 16px;
    --16-regular-b-letter-spacing: 0px;
    --16-regular-b-line-height: 24px;
    --16-regular-b-font-style: normal;
    --16-bold-b-font-family: "Space Grotesk", Helvetica;
    --16-bold-b-font-weight: 700;
    --16-bold-b-font-size: 16px;
    --16-bold-b-letter-spacing: 0px;
    --16-bold-b-line-height: 24px;
    --16-bold-b-font-style: normal;
    --12-regular-font-family: "Space Grotesk", Helvetica;
    --12-regular-font-weight: 400;
    --12-regular-font-size: 12px;
    --12-regular-letter-spacing: 0px;
    --12-regular-line-height: 14.399999618530273px;
    --12-regular-font-style: normal;
    --120-bold-font-family: "Space Grotesk", Helvetica;
    --120-bold-font-weight: 700;
    --120-bold-font-size: 120px;
    --120-bold-letter-spacing: -1.2799999713897705px;
    --120-bold-line-height: 120px;
    --120-bold-font-style: normal;
    --102-bold-font-family: "Space Grotesk", Helvetica;
    --102-bold-font-weight: 700;
    --102-bold-font-size: 102px;
    --102-bold-letter-spacing: -1.2799999713897705px;
    --102-bold-line-height: 51.22999954223633px;
    --102-bold-font-style: normal;
    --12-REGULAR-font-family: "Space Grotesk", Helvetica;
    --12-REGULAR-font-weight: 400;
    --12-REGULAR-font-size: 12px;
    --12-REGULAR-letter-spacing: 0px;
    --12-REGULAR-line-height: 14.399999618530273px;
    --12-REGULAR-font-style: normal;
    --20-regular-font-family: "Space Grotesk", Helvetica;
    --20-regular-font-weight: 400;
    --20-regular-font-size: 20px;
    --20-regular-letter-spacing: -1.2799999713897705px;
    --20-regular-line-height: 24px;
    --20-regular-font-style: normal;
    --20-bold-font-family: "Space Grotesk", Helvetica;
    --20-bold-font-weight: 700;
    --20-bold-font-size: 20px;
    --20-bold-letter-spacing: -1.2799999713897705px;
    --20-bold-line-height: 24px;
    --20-bold-font-style: normal;
    --colors-primary: rgba(247, 247, 247, 1);
    --colors-secondary: rgba(32, 32, 32, 1);
    --colors-extra: rgba(217, 217, 217, 1);
    --colors-seetrough1: rgba(32, 32, 32, 0.4);
    --colors-seetrough2: rgba(247, 247, 247, 0.4);
    --collection-padding-left: 0px;
    --collection-sizing-desktop: 1440px;
    --collection-sizing-mobile: 320px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-colors-mode="mode-1">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-colors-mode="mode-1"] {
    --colors-primary: rgba(247, 247, 247, 1);
    --colors-secondary: rgba(32, 32, 32, 1);
    --colors-seetrough1: rgba(32, 32, 32, 0.4);
    --colors-seetrough2: rgba(247, 247, 247, 0.4);
}

[data-colors-mode="mode-2"] {
    --colors-primary: rgba(32, 32, 32, 1);
    --colors-secondary: rgba(247, 247, 247, 1);
    --colors-seetrough1: rgba(247, 247, 247, 0.4);
    --colors-seetrough2: rgba(32, 32, 32, 0.4);
}

[data-collection-mode="mode-1"] {
    --collection-sizing-desktop: 1440px;
    --collection-sizing-mobile: 320px;
}

[data-collection-mode="mode-2"] {
    --collection-sizing-desktop: 0px;
    --collection-sizing-mobile: 0px;
}