:root { --collection-1-breakpoint: 1440px; --collection-1-columns: 12px; --collection-1-margin: 96px; --collection-1-gutter: 32px; --collection-1-text-display: 1120px; --collection-1-text-logolower: 35px; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-collection-1-mode="desktop"] { --collection-1-breakpoint: 1440px; --collection-1-columns: 12px; --collection-1-margin: 96px; --collection-1-gutter: 32px; --collection-1-text-display: 1120px; --collection-1-text-logolower: 35px; } [data-collection-1-mode="tablet"] { --collection-1-breakpoint: 768px; --collection-1-columns: 8px; --collection-1-margin: 24px; --collection-1-gutter: 24px; --collection-1-text-display: 548px; --collection-1-text-logolower: 30px; } [data-collection-1-mode="mobile"] { --collection-1-breakpoint: 390px; --collection-1-columns: 4px; --collection-1-margin: 16px; --collection-1-gutter: 16px; --collection-1-text-display: 350px; --collection-1-text-logolower: 20px; } [data-collection-1-mode="lg-desktop"] { --collection-1-breakpoint: 1920px; --collection-1-columns: 12px; --collection-1-margin: 128px; --collection-1-gutter: 40px; --collection-1-text-display: 1900px; --collection-1-text-logolower: 35px; }