@total_onion/onion-library 3.0.49 → 3.2.0

package/onion-loader-local.js

@@ -1,222 +0,0 @@
-import jsAssetList from './public/jsAssets.mjs';
-const coreAssets = jsAssetList.dynamicAssets;
-
-/* eslint-disable no-use-before-define */
-/* eslint-disable no-console */
-
-//*** Lazyloader ***//
-
-/**
- * The options object for the lazyloader.
- * @type {object}
- * @property {string} rootMargin The root margin for the IntersectionObserver.
- * @default '0% 0% 0%'
- * @property {number} threshold The threshold for the IntersectionObserver.
- * @property {boolean} debugLogMessages Whether to log debug messages.
- * @property {array} lazyBlocksToSearchFor The array of lazy blocks to search for.
- * @property {array} lazyBlocksFound The array of lazy blocks found.
- * @property {array} assetArray The array of assets to load.
- * @property {object} assetMap The asset map object.
- * @property {boolean} ignoreCss Whether to ignore the css.
- * @property {boolean} lazy Whether to lazy load the assets (after Assets alias).
- * @property {string} filePath The file path for the js assets.
- * @default 'js/blocks/'
- * @property {string} filePathCss The file path for the css assets (after Assets alias).
- * @default 'scss/blocks/'
- */
-
-const options = {
-	rootMargin: '100% 0px 300px 0px',
-	threshold: 0,
-	debugLogMessages: false,
-	lazyBlocksToSearchFor: [],
-	lazyBlocksFound: [],
-	coreAssets: [...coreAssets],
-	projectAssets: [],
-	assetMap: {},
-	css: true,
-	lazy: true,
-	cssLoadingStyle: 'component', // 'component' or 'bundle'
-	filePrefix: 'dev', //'nodemodules', 'assets' or 'dev'
-	fileSuffixJs: '.js',
-	fileSuffixCss: '.css',
-	filePath: 'js/blocks',
-	filePathCss: 'scss/blocks'
-};
-
-/**
- * Initializes the lazyloader.
- */
-function lazyloaderInit() {
-	const assetArray = options.coreAssets.concat(options.projectAssets);
-	options.debugLogMessages && console.log('Lazy Loader initialized!');
-	options.lazyBlocksToSearchFor = [];
-	assetArray.forEach((asset) => {
-		if (asset.assetKey.includes('-v3') || asset.assetKey.includes('-v4')) {
-			options.assetMap[asset.assetKey] = {
-				js: () =>
-					import(
-						`./public/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
-					)
-			};
-		}
-
-		// Add to lazy blocks to search for
-		options.lazyBlocksToSearchFor.push(
-			`[data-assetkey="${asset.assetKey}"]`
-		);
-	});
-
-	options.lazyBlocksToSearchFor.forEach((block) => {
-		if (document.querySelector(block)) {
-			options.lazyBlocksFound.push(document.querySelector(block));
-		}
-	});
-
-	// options.lazyBlocksFound = Array.from(
-	// 	document.querySelectorAll(options.lazyBlocksToSearchFor)
-	// );
-
-	// If data eager loading attribute is true - load js straight away
-	options.lazyBlocksFound.forEach((block) => {
-		if (block.dataset.eager == 'true') {
-			callBlockJs(block);
-		}
-	});
-
-	options.debugLogMessages && console.log('Lazyloader Options', options);
-
-	// Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
-	if (options.lazy === false || !('IntersectionObserver' in window)) {
-		options.debugLogMessages && console.log('running eager loading');
-		try {
-			options.lazyBlocksFound.forEach((block) => {
-				callBlockJs(block);
-			});
-		} catch (error) {
-			console.log(error);
-		}
-	} else {
-		options.debugLogMessages && console.log('running normal process');
-		observerInit(options.lazyBlocksFound);
-	}
-}
-
-/**
- * Initializes the IntersectionObserver for the lazy loading of blocks.
- * @param {array} elementsToObserve The array of block elements to observe.
- */
-function observerInit(elementsToObserve = []) {
-	const observer = new IntersectionObserver(intersectionCallback, options);
-	elementsToObserve.forEach((element) => {
-		if (element) {
-			observer.observe(element);
-		}
-	});
-}
-
-/**
- * Callback function for the IntersectionObserver.
- * @param {array} entries The entries array from the IntersectionObserver.
- * @param {object} observer The IntersectionObserver object.
- */
-const intersectionCallback = (entries, observer) => {
-	options.debugLogMessages && console.log('Observer entries', entries);
-	entries.forEach((entry) => {
-		if (entry.isIntersecting) {
-			const lazyTarget = entry.target;
-			try {
-				callBlockJs(lazyTarget);
-			} catch (error) {
-				console.log(
-					error,
-					'block data assetkey:',
-					lazyTarget.dataset.assetkey,
-					' - ',
-					'asset import function:',
-					options.assetMap[lazyTarget.dataset.assetkey],
-					'are you missing an asset key or import function?'
-				);
-			}
-			observer.unobserve(lazyTarget);
-			options.debugLogMessages &&
-				console.log('Unobserving lazyElement', lazyTarget);
-		}
-	});
-};
-
-/**
- * Calls the block asset functions and adds the loaded class to the block.
- * @param {object} block The block element.
- */
-function callBlockJs(block) {
-	if (!block.classList.contains('loaded')) {
-		Promise.all([
-			options.assetMap[block.dataset.assetkey].js(),
-			block.dataset.cssload !== 'false' && loadCss(block.dataset.assetkey)
-		]).then((module) => {
-			try {
-				if (block.dataset.jsload !== 'false') {
-					module[0].default({
-						block,
-						css: false
-					});
-				} else {
-					options.debugLogMessages &&
-						console.log(
-							`Skipping JS load for block: ${block.dataset.assetkey}`
-						);
-				}
-				// block.classList.add('loaded');
-			} catch (error) {
-				console.log('could not load block js', error);
-			}
-		});
-	}
-}
-
-/**
- * Checks to see if the css for the block has already been included in the 'criticalconfig' window object.
- * Will return true if it is.
- * @param {string} assetKey The assetkey string of the block.
- * @returns {boolean}
- */
-export function inCriticalCssConfig(assetKey) {
-	if (!globalThis.criticalConfig) {
-		return false;
-	}
-	if (
-		globalThis.criticalConfig &&
-		globalThis.criticalConfig.indexOf(assetKey) === -1
-	) {
-		return false;
-	}
-	return true;
-}
-
-/**
- * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
- * @param {string} assetKey The assetkey string of the block.
- * @param {object} options The options object which will at the very least contain the css property set to true.
- * @returns {promise}
- */
-export function loadCss(assetKey) {
-	if (options.css == true) {
-		const promise = new Promise((resolve) => {
-			if (!inCriticalCssConfig(assetKey)) {
-				const link = `<link rel="stylesheet" href="./public/block-${assetKey}/${assetKey}${options.fileSuffixCss}" />`;
-				document.head.insertAdjacentHTML('beforeend', link);
-				resolve(true);
-			} else {
-				return resolve(true);
-			}
-		});
-	}
-}
-
-const api = {
-	lazyloaderInit,
-	options
-};
-
-export default api;

package/public/assetList.mjs

@@ -1,3 +0,0 @@
-
-const dynamicAssets = ["./components/block-video-content-v3/video-content-v3.scss","./components/block-sub-group-container-v3/sub-group-container-v3.scss","./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.scss","./components/block-standard-content-v3/standard-content-v3.scss","./components/block-spotify-embed-v3/spotify-embed-v3.scss","./components/block-spacer-v3/spacer-v3.scss","./components/block-social-networks-v3/social-networks-v3.scss","./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.scss","./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.scss","./components/block-site-logo-container-v3/site-logo-container-v3.scss","./components/block-site-copyright-notice-v3/site-copyright-notice-v3.scss","./components/block-single-responsive-image-v3/single-responsive-image-v3.scss","./components/block-single-column-container-v3/single-column-container-v3.scss","./components/block-section-separator-v3/section-separator-v3.scss","./components/block-scrolling-banner-v3/scrolling-banner-v3.scss","./components/block-responsive-table-v3/responsive-table-v3.scss","./components/block-raw-html-v3/raw-html-v3.scss","./components/block-product-info-v3/product-info-v3.scss","./components/block-post-info-v3/post-info-v3.scss","./components/block-nav-menu-container-v3/nav-menu-container-v3.scss","./components/block-modal-form-v3/modal-form-v3.scss","./components/block-market-selector-v3/market-selector-v3.scss","./components/block-lottie-content-v3/lottie-content-v3.scss","./components/block-group-container-v3/group-container-v3.scss","./components/block-gradient-layer-v3/gradient-layer-v3.scss","./components/block-form-selection-v3/form-selection-v3.scss","./components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss","./components/block-divider-v3/divider-v3.scss","./components/block-cover-link-v3/cover-link-v3.scss","./components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss","./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss","./components/block-block-interactions-v3/block-interactions-v3.scss","./components/block-betterreviews-display-v3/betterreviews-display-v3.scss","./components/block-back-to-top-button-v3/back-to-top-button-v3.scss","./components/block-accordion-v3/accordion-v3.scss","./components/block-accent-image-v3/accent-image-v3.scss","./components/block-video-content-v3/video-content-v3.js","./components/block-sub-group-container-v3/sub-group-container-v3.js","./components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js","./components/block-standard-content-v3/standard-content-v3.js","./components/block-spotify-embed-v3/spotify-embed-v3.js","./components/block-spacer-v3/spacer-v3.js","./components/block-social-networks-v3/social-networks-v3.js","./components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js","./components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js","./components/block-site-logo-container-v3/site-logo-container-v3.js","./components/block-site-copyright-notice-v3/site-copyright-notice-v3.js","./components/block-single-responsive-image-v3/single-responsive-image-v3.js","./components/block-single-column-container-v3/single-column-container-v3.js","./components/block-section-separator-v3/section-separator-v3.js","./components/block-scrolling-banner-v3/scrolling-banner-v3.js","./components/block-responsive-table-v3/responsive-table-v3.js","./components/block-raw-html-v3/raw-html-v3.js","./components/block-product-info-v3/product-info-v3.js","./components/block-post-info-v3/post-info-v3.js","./components/block-nav-menu-container-v3/nav-menu-container-v3.js","./components/block-modal-form-v3/modal-form-v3.js","./components/block-market-selector-v3/market-selector-v3.js","./components/block-lottie-content-v3/lottie-content-v3.js","./components/block-group-container-v3/group-container-v3.js","./components/block-gradient-layer-v3/gradient-layer-v3.js","./components/block-form-selection-v3/form-selection-v3.js","./components/block-featured-image-gallery-v3/featured-image-gallery-v3.js","./components/block-divider-v3/divider-v3.js","./components/block-cover-link-v3/cover-link-v3.js","./components/block-cocktail-recipe-v3/cocktail-recipe-v3.js","./components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js","./components/block-block-interactions-v3/block-interactions-v3.js","./components/block-betterreviews-display-v3/betterreviews-display-v3.js","./components/block-back-to-top-button-v3/back-to-top-button-v3.js","./components/block-accordion-v3/accordion-v3.js","./components/block-accent-image-v3/accent-image-v3.js"];
-export default dynamicAssets;

package/public/block-accent-image-v3/accent-image-v3.css

@@ -1,2 +0,0 @@
-@layer base-styles {
-}

package/public/block-accent-image-v3/accent-image-v3.js

@@ -1,7 +0,0 @@
-export default function accentimagev3Js(options = {}) {
-  try {
-    const { block } = options;
-  } catch (error) {
-    console.error(error);
-  }
-}

package/public/block-accordion-v3/accordion-v3.css

@@ -1,380 +0,0 @@
-@layer base-styles {
-  .accordion-v3__inner-container {
-    grid-area: main;
-    place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
-    z-index: 5;
-    z-index: var(--content-z-index, 5);
-    overflow: var(--content-box-overflow);
-    min-width: -moz-min-content;
-    min-width: min-content;
-    aspect-ratio: var(--content-box-aspect-ratio);
-    border-radius: var(--border-radius);
-    border-width: var(--border-width);
-    border-color: var(--border-colour);
-    border-style: var(--border-style);
-    display: flex;
-    flex-direction: column;
-    flex-direction: var(--content-box-items-direction-mobile, column);
-    justify-content: var(--content-items-alignment-mobile);
-    align-items: center;
-    background-color: var(--cb-bg-colour);
-    padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
-    margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
-    -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
-    column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__inner-container {
-      justify-content: var(--content-items-alignment-portrait);
-      place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
-      padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
-      margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__inner-container {
-      -moz-column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
-      column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
-      justify-content: var(--content-items-alignment);
-      max-width: var(--cb-max-width);
-      place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
-      padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
-      margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
-    }
-  }
-  .accordion-v3__inner-container {
-    box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
-  }
-  .accordion-v3__content-box,
-  .accordion-v3__content-container {
-    max-width: var(--wysiwyg-max-width-mobile);
-    margin-inline: auto;
-    display: grid;
-    word-break: normal;
-    width: 100%;
-    width: var(--content-box-width, 100%);
-    -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
-  }
-  .accordion-v3__content-box:last-child,
-  .accordion-v3__content-container:last-child {
-    margin-bottom: 0;
-  }
-  .accordion-v3__content-box,
-  .accordion-v3__content-container {
-    color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
-    }
-  }
-  .accordion-v3__content-box,
-  .accordion-v3__content-container {
-    text-transform: var(--default-text-transform-mobile);
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      text-transform: var(--default-text-transform-desktop);
-    }
-  }
-  .accordion-v3__content-box,
-  .accordion-v3__content-container {
-    text-align: var(--default-text-align-mobile);
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      text-align: var(--default-text-align-desktop);
-    }
-  }
-  .accordion-v3__content-box,
-  .accordion-v3__content-container {
-    display: block;
-    display: var(--display-mobile, block);
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      display: block;
-      display: var(--display-portrait, block);
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      display: block;
-      display: var(--display-desktop, block);
-    }
-  }
-  .accordion-v3__content-box p,
-  .accordion-v3__content-box li,
-  .accordion-v3__content-box div,
-  .accordion-v3__content-container p,
-  .accordion-v3__content-container li,
-  .accordion-v3__content-container div {
-    font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box p,
-    .accordion-v3__content-box li,
-    .accordion-v3__content-box div,
-    .accordion-v3__content-container p,
-    .accordion-v3__content-container li,
-    .accordion-v3__content-container div {
-      font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box p,
-    .accordion-v3__content-box li,
-    .accordion-v3__content-box div,
-    .accordion-v3__content-container p,
-    .accordion-v3__content-container li,
-    .accordion-v3__content-container div {
-      font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
-    }
-  }
-  .accordion-v3__content-box p,
-  .accordion-v3__content-box li,
-  .accordion-v3__content-box div,
-  .accordion-v3__content-container p,
-  .accordion-v3__content-container li,
-  .accordion-v3__content-container div {
-    font-style: var(--default-font-style-mobile);
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box p,
-    .accordion-v3__content-box li,
-    .accordion-v3__content-box div,
-    .accordion-v3__content-container p,
-    .accordion-v3__content-container li,
-    .accordion-v3__content-container div {
-      font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box p,
-    .accordion-v3__content-box li,
-    .accordion-v3__content-box div,
-    .accordion-v3__content-container p,
-    .accordion-v3__content-container li,
-    .accordion-v3__content-container div {
-      font-style: var(--default-font-style-desktop);
-    }
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      max-width: var(--wysiwyg-max-width-portrait);
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__content-box,
-    .accordion-v3__content-container {
-      max-width: var(--wysiwyg-max-width);
-    }
-  }
-  .accordion-v3--text-shadow {
-    text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
-  }
-  .accordion-v3__cta-selection-container {
-    width: 100%;
-    display: var(--cta-container-display);
-    grid-template-columns: var(--grid-columns-mobile);
-    flex-wrap: wrap;
-    flex-direction: var(--cta-flex-direction);
-    justify-content: var(--cta-alignment-mobile);
-    gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-mobile));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3__cta-selection-container {
-      gap: calc(var(--global-inline-spacing) * var(--cta-spacing-gap-desktop));
-      justify-content: var(--cta-alignment-portrait);
-      grid-template-columns: var(--grid-columns-portrait);
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3__cta-selection-container {
-      justify-content: var(--cta-alignment);
-      grid-template-columns: var(--grid-columns-desktop);
-    }
-  }
-  .accordion-v3 {
-    width: 100%;
-    pointer-events: all;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3 {
-      gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3 {
-      gap: calc(var(--title-gap) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  .accordion-v3-wrapper {
-    text-align: left;
-    text-align: initial;
-    background: var(--background-color);
-  }
-  .accordion-v3-question-wrapper {
-    cursor: pointer;
-    place-items: flex-start;
-  }
-  .accordion-v3-question-wrapper button {
-    width: 100%;
-    align-items: center;
-    cursor: pointer;
-    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
-    background: initial;
-    padding: 0;
-    padding: initial;
-    border: medium none currentcolor;
-    border: initial;
-  }
-  .accordion-v3__content-container {
-    padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) calc(50 / var(--desktop-design-reference) * var(--screen-width-static)) calc(10 / var(--desktop-design-reference) * var(--screen-width-static)) 0;
-  }
-  .accordion-v3-image-wrapper {
-    grid-area: icon;
-    position: absolute;
-    right: calc(2 / var(--desktop-design-reference) * var(--screen-width-static));
-    width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3-image-wrapper {
-      width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3-image-wrapper {
-      width: calc(var(--image-icon-size) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  .accordion-v3-image-wrapper img {
-    width: 100%;
-  }
-  .accordion-v3-question {
-    text-align: left;
-    display: grid;
-    grid-template: "question icon" "answer ..."/auto min-content;
-  }
-  .accordion-v3-question--icon-left {
-    grid-template: "icon question" "... answer"/min-content auto;
-    -moz-column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
-    column-gap: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
-  }
-  .accordion-v3-answer-wrapper {
-    overflow: hidden;
-    height: 0;
-    grid-area: answer;
-  }
-  .accordion-v3-answer-wrapper p {
-    padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3-answer-wrapper p {
-      padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3-answer-wrapper p {
-      padding-inline: calc(var(--text-padding-horizontal) / var(--design-reference) * var(--screen-width));
-    }
-  }
-  .accordion-v3-answer {
-    font-size: calc(22 / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier));
-    grid-column: 1/-1;
-    padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
-    padding-top: calc(20 / var(--design-reference) * var(--screen-width));
-  }
-  @media screen and (min-width: 768px) {
-    .accordion-v3-answer {
-      padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
-      padding-top: calc(20 / var(--design-reference) * var(--screen-width));
-    }
-  }
-  @media screen and (min-width: 1024px) {
-    .accordion-v3-answer {
-      padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
-      padding-top: calc(20 / var(--design-reference) * var(--screen-width));
-    }
-  }
-  .accordion-v3-answer:last-child {
-    padding-bottom: 0;
-  }
-  .accordion-v3-icon {
-    grid-area: icon;
-    background: var(--icon-background-color);
-    display: flex;
-    align-items: center;
-    height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
-    width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
-  }
-  .accordion-v3-icon.active .accordion-v3-animation:before {
-    transform: rotate(90deg);
-  }
-  .accordion-v3-icon.active .accordion-v3-animation:after {
-    transform: rotate(180deg);
-  }
-  .accordion-v3 .image-icon-active {
-    transform: rotate(var(--image-icon-rotation-deg));
-    transition: transform 0.3s ease;
-  }
-  .accordion-v3 :not(.image-icon-active, .lottie-animations *) {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
-  }
-  .accordion-v3-animation {
-    height: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
-    margin: auto;
-    position: relative;
-    transition: transform 0.3s ease;
-    width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
-  }
-  .accordion-v3-animation:before,
-  .accordion-v3-animation:after {
-    background-color: red;
-    content: "";
-    position: absolute;
-    transition: transform 0.25s ease-out;
-  }
-  .accordion-v3-animation:before {
-    height: 100%;
-    left: 50%;
-    margin-left: -1px;
-    top: 0;
-    width: 2px;
-  }
-  .accordion-v3-animation:after {
-    height: 2px;
-    left: 0;
-    margin-top: -1px;
-    top: 50%;
-    width: 100%;
-  }
-}