mod-build 4.0.0 → 4.0.1-beta.2

package/src/shared-components/hero/_hero.scss

@@ -1,253 +0,0 @@
-$hero-min-height: 0 !default;
-$hero-padding-mobile: 25px 0 !default;
-$hero-padding-tablet: 45px 0 !default;
-$hero-padding-desktop: 70px 0 !default;
-$hero-position: relative !default;
-$hero-transition: padding 300ms ease, min-height 300ms ease !default;
-
-$hero-background-background-color: transparent !default;
-$hero-background-height: 100% !default;
-$hero-background-height-mobile: $hero-background-height !default;
-$hero-background-max-height: 100% !default;
-$hero-background-left: 0 !default;
-$hero-background-overflow: hidden !default;
-$hero-background-position: absolute !default;
-$hero-background-top: 0 !default;
-$hero-background-width: 100% !default;
-$hero-background-z-index: -1 !default;
-
-$hero-background-image-height: 100% !default;
-$hero-background-image-max-width: 100% !default;
-$hero-background-image-object-fit: cover !default;
-$hero-background-image-object-position: top !default;
-$hero-background-image-width: 100% !default;
-
-$hero-overlay-background: linear-gradient(180deg, transparent 15%, rgba($color-white,.98) 25%, rgba($color-white,1) 87%, rgba($color-white,1) 100%) !default;
-$hero-overlay-background-mobile: $hero-overlay-background !default;
-$hero-overlay-display: none !default;
-$hero-overlay-display-mobile: block !default;
-$hero-overlay-height: 100% !default;
-$hero-overlay-height-mobile: $hero-overlay-height !default;
-$hero-overlay-left: 0 !default;
-$hero-overlay-overflow: hidden !default;
-$hero-overlay-position: absolute !default;
-$hero-overlay-top: 0 !default;
-$hero-overlay-width: 100% !default;
-$hero-overlay-z-index: 0 !default;
-
-$hero-wrapper-align-items-mobile: center !default;
-$hero-wrapper-align-items-tablet: center !default;
-$hero-wrapper-align-items-desktop: flex-start !default;
-$hero-wrapper-display: flex !default;
-$hero-wrapper-flex-direction-mobile: column !default;
-$hero-wrapper-flex-direction-tablet: column !default;
-$hero-wrapper-flex-direction-desktop: row !default;
-$hero-wrapper-justify-content-desktop: initial !default;
-$hero-wrapper-position: relative !default;
-$hero-wrapper-width: 100% !default;
-$hero-wrapper-z-index: 1 !default;
-
-$hero-content-background-color: $color-white !default;
-$hero-content-border-radius: 4px !default;
-$hero-content-box-shadow: 0 10px 20px 0 rgba($color-black, .08) !default;
-$hero-content-max-width-mobile: 100% !default;
-$hero-content-max-width-tablet: 445px !default;
-$hero-content-max-width-desktop: $hero-content-max-width-tablet !default;
-$hero-content-padding: 0 !default;
-
-$hero-header-color: $color-white !default;
-$hero-header-text-align: right !default;
-$hero-header-text-align-mobile: center !default;
-
-$hero-title-font-size-mobile: 26px !default;
-$hero-title-font-size-tablet: 30px !default;
-$hero-title-font-size-desktop: 34px !default;
-$hero-title-font-size-lg: $hero-title-font-size-desktop !default;
-$hero-title-font-weight: 700 !default;
-$hero-title-line-height: 1.2 !default;
-$hero-title-line-height-mobile: $hero-title-line-height !default;
-$hero-title-line-height-lg: $hero-title-line-height !default;
-$hero-title-margin: 0 0 15px !default;
-$hero-title-margin-mobile: 0 0 25px !default;
-$hero-title-margin-tablet: $hero-title-margin !default;
-$hero-title-text-transform: none !default;
-
-$hero-subtitle-font-size: 16px !default;
-$hero-subtitle-font-size-mobile: $hero-subtitle-font-size !default;
-$hero-subtitle-font-weight: 400 !default;
-$hero-subtitle-line-height: 1.4 !default;
-$hero-subtitle-margin: 0 auto 15px !default;
-$hero-subtitle-text-transform: none !default;
-
-$hero-full-background-color: $color-white !default;
-$hero-full-min-height: 100vh !default;
-$hero-full-padding: 0 !default;
-$hero-full-content-background-color: transparent !default;
-$hero-full-content-box-shadow: none !default;
-$hero-full-overlay-display: none !default;
-
-.hero {
-	min-height: $hero-min-height;
-	padding: $hero-padding-mobile;
-	position: $hero-position;
-	transition: $hero-transition;
-
-	&__background {
-		background-color: $hero-background-background-color;
-		height: $hero-background-height-mobile;
-		left: $hero-background-left;
-		overflow: $hero-background-overflow;
-		position: $hero-background-position;
-		top: $hero-background-top;
-		width: $hero-background-width;
-		z-index: $hero-background-z-index;
-	}
-
-	&__background-image {
-		height: $hero-background-image-height;
-		max-width: $hero-background-image-max-width;
-		object-fit: $hero-background-image-object-fit;
-		object-position: $hero-background-image-object-position;
-		width: $hero-background-image-width;
-	}
-
-	&__background-overlay {
-		background: $hero-overlay-background-mobile;
-		display: $hero-overlay-display-mobile;
-		height: $hero-overlay-height-mobile;
-		left: $hero-overlay-left;
-		overflow: $hero-overlay-overflow;
-		position: $hero-overlay-position;
-		top: $hero-overlay-top;
-		width: $hero-overlay-width;
-		z-index: $hero-overlay-z-index;
-	}
-
-	&__wrapper {
-		align-items: $hero-wrapper-align-items-mobile;
-		display: $hero-wrapper-display;
-		flex-direction: $hero-wrapper-flex-direction-mobile;
-		position: $hero-wrapper-position;
-		width: $hero-wrapper-width;
-		z-index: $hero-wrapper-z-index;
-	}
-
-	&__content {
-		background-color: $hero-content-background-color;
-		border-radius: $hero-content-border-radius;
-		box-shadow: $hero-content-box-shadow;
-		max-width: $hero-content-max-width-mobile;
-		padding: $hero-content-padding;
-	}
-
-	&__header {
-		color: $hero-header-color;
-		text-align: $hero-header-text-align-mobile;
-	}
-
-	&__title {
-		font-size: $hero-title-font-size-mobile;
-		font-weight: $hero-title-font-weight;
-		line-height: $hero-title-line-height-mobile;
-		margin: $hero-title-margin-mobile;
-		text-transform: $hero-title-text-transform;
-	}
-
-	&__subtitle {
-		font-size: $hero-subtitle-font-size-mobile;
-		font-weight: $hero-subtitle-font-weight;
-		line-height: $hero-subtitle-line-height;
-		margin: $hero-subtitle-margin;
-		text-transform: $hero-subtitle-text-transform;
-	}
-}
-
-@include breakpoint-sm {
-	.hero {
-		padding: $hero-padding-tablet;
-
-		&__background {
-			height: $hero-background-height;
-			max-height: $hero-background-max-height;
-		}
-
-		&__background-overlay {
-			background: $hero-overlay-background;
-			display: $hero-overlay-display;
-			height: $hero-overlay-height;
-		}
-
-		&__wrapper {
-			align-items: $hero-wrapper-align-items-tablet;
-			flex-direction: $hero-wrapper-flex-direction-tablet;
-		}
-
-		&__content {
-			max-width: $hero-content-max-width-tablet;
-		}
-
-		&__header {
-			text-align: $hero-header-text-align;
-		}
-
-		&__title {
-			font-size: $hero-title-font-size-tablet;
-			line-height: $hero-title-line-height;
-			margin: $hero-title-margin-tablet;
-		}
-
-		&__subtitle {
-			font-size: $hero-subtitle-font-size;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.hero {
-		padding: $hero-padding-desktop;
-
-		&__wrapper {
-			align-items: $hero-wrapper-align-items-desktop;
-			flex-direction: $hero-wrapper-flex-direction-desktop;
-			justify-content: $hero-wrapper-justify-content-desktop;
-		}
-
-		&__content {
-			max-width: $hero-content-max-width-desktop;
-		}
-
-		&__title {
-			font-size: $hero-title-font-size-desktop;
-			margin: $hero-title-margin;
-		}
-	}
-}
-
-@include breakpoint-lg {
-	.hero {
-		&__title {
-			font-size: $hero-title-font-size-lg;
-			line-height: $hero-title-line-height-lg;
-		}
-	}
-}
-
-@include breakpoint-phone {
-	.hero {
-		&--full {
-			background-color: $hero-full-background-color;
-			min-height: $hero-full-min-height;
-			padding: $hero-full-padding;
-
-			.hero__content,
-			.form {
-				background: $hero-full-content-background-color;
-				box-shadow: $hero-full-content-box-shadow;
-			}
-
-			.hero__background-overlay {
-				display: $hero-full-overlay-display;
-			}
-		}
-	}
-}

package/src/shared-components/hero/hero.html

@@ -1,126 +0,0 @@
-<div class="hero{{#if this.hero.class}} {{this.hero.class}}{{/if}}"{{#if this.hero.id}} id="{{this.hero.id}}"{{/if}}>
-	{{#if this.hero.backgroundImage}}
-		{{#if this.hero.backgroundImage.wrapper}}
-			<div class="hero__background-wrapper{{#if this.hero.backgroundImage.wrapper.class}} {{this.hero.backgroundImage.wrapper.class}}{{/if}}" {{#if this.hero.backgroundImage.wrapper.extraAttributes}}{{#each this.hero.backgroundImage.wrapper.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
-		{{/if}}
-		<picture class="hero__background{{#if this.hero.backgroundImage.class}} {{this.hero.backgroundImage.class}}{{/if}}"{{#if this.hero.backgroundImage.extraAttributes}}{{#each this.hero.backgroundImage.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
-			{{#if this.hero.backgroundImage.globalSrc}}
-				{{#if this.hero.backgroundImage.srcSmallDevices}}
-				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
-				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
-				{{else}}
-				<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
-				{{/if}}
-				<source media="(min-width: 768px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.globalSrc}}.webp" type="image/webp">
-				<img class="hero__background-image" src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.globalSrc}}.jpg" alt="">
-			{{else}}
-				{{#if this.hero.backgroundImage.srcTabletDevices}}
-					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.src}}.webp" type="image/webp">
-					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.src}}.jpg" type="image/jpeg">
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.srcTabletDevices}}.webp" type="image/webp">
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.srcTabletDevices}}.jpg" type="image/jpeg">
-					<source srcset="{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
-					<img class="hero__background-image" src="{{this.hero.backgroundImage.srcSmallDevices}}.jpg" alt="">
-				{{else}}
-					{{#if this.hero.backgroundImage.srcSmallDevices}}
-					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.srcSmallDevices}}.webp" type="image/webp">
-					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
-					{{else}}
-					<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
-					{{/if}}
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.src}}.webp" type="image/webp">
-					<img class="hero__background-image" src="{{this.hero.backgroundImage.src}}.jpg" alt="">
-				{{/if}}
-			{{/if}}
-		</picture>
-		{{#if this.hero.backgroundImage.additionalBackgroundImage}}
-		<picture class="hero__background{{#if this.hero.backgroundImage.additionalBackgroundImage.class}} {{this.hero.backgroundImage.additionalBackgroundImage.class}}{{/if}}"{{#if this.hero.backgroundImage.additionalBackgroundImage.extraAttributes}}{{#each this.hero.backgroundImage.additionalBackgroundImage.extraAttributes}}{{{this.attributeName}}}{{#if this.attributeValue}}="{{{this.attributeValue}}}"{{/if}}{{/each}}{{/if}}>
-			{{#if this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}
-				{{#if this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}
-				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
-				<source media="(max-width: 767px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
-				{{else}}
-				<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
-				{{/if}}
-				<source media="(min-width: 768px)" srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}.webp" type="image/webp">
-				<img class="hero__background-image" src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{this.hero.backgroundImage.additionalBackgroundImage.globalSrc}}.jpg" alt="">
-			{{else}}
-				{{#if this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}
-					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.webp" type="image/webp">
-					<source media="(min-width: 992px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.jpg" type="image/jpeg">
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}.webp" type="image/webp">
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcTabletDevices}}.jpg" type="image/jpeg">
-					<source srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
-					<img class="hero__background-image" src="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" alt="">
-				{{else}}
-					{{#if this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}
-					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.webp" type="image/webp">
-					<source media="(max-width: 767px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.srcSmallDevices}}.jpg" type="image/jpeg">
-					{{else}}
-					<source media="(max-width: 767px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==" sizes="100%">
-					{{/if}}
-					<source media="(min-width: 768px)" srcset="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.webp" type="image/webp">
-					<img class="hero__background-image" src="{{this.hero.backgroundImage.additionalBackgroundImage.src}}.jpg" alt="">
-				{{/if}}
-			{{/if}}
-		</picture>
-		{{/if}}
-		{{#xif "this.hero.backgroundImage.includeOverlay === true"}}
-		<div class="hero__background-overlay"></div>
-		{{/xif}}
-		{{#if this.hero.backgroundImage.wrapper}}</div>{{/if}}
-	{{/if}}
-	<div class="hero__container container">
-		<div class="hero__wrapper">
-			{{#if this.hero.moveHeroContentToTop}}
-				{{#if this.hero.formTemplateInclude}}
-				<div class="hero__content">
-					{{fileInclude this.hero.formTemplateInclude
-						form = this
-					}}
-				</div>
-				{{/if}}
-			{{/if}}
-			<div class="hero__header">
-				{{#if this.hero.titleSubTitleWrapperClass}}<div class="{{this.hero.titleSubTitleWrapperClass}}">{{/if}}
-				{{#if this.hero.title}}
-					{{#if this.hero.title.mobileText}}
-					<h1 class="hero__title{{#if this.hero.title.class}} {{this.hero.title.class}}{{/if}}"{{#if this.hero.title.id}} id="{{this.hero.title.id}}"{{/if}}{{#if this.hero.title.extraAttributes}}{{#each this.hero.title.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="title">
-						<span class="visible-xs">{{{this.hero.title.mobileText}}}</span>
-						<span class="hidden-xs">{{{this.hero.title.text}}}</span>
-					</h1>
-					{{else}}
-					<h1 class="hero__title{{#if this.hero.title.class}} {{this.hero.title.class}}{{/if}}"{{#if this.hero.title.id}} id="{{this.hero.title.id}}"{{/if}}{{#if this.hero.title.extraAttributes}}{{#each this.hero.title.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="title">
-						{{{this.hero.title.text}}}
-					</h1>
-					{{/if}}
-				{{/if}}
-				{{#if this.hero.additionalTitle}}
-					<h1 class="hero__title{{#if this.hero.additionalTitle.class}} {{this.hero.additionalTitle.class}}{{/if}}"{{#if this.hero.additionalTitle.id}} id="{{this.hero.additionalTitle.id}}"{{/if}}{{#if this.hero.additionalTitle.extraAttributes}}{{#each this.hero.additionalTitle.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}>
-						{{{this.hero.additionalTitle.text}}}
-					</h1>
-				{{/if}}
-				{{#if this.hero.subtitle.text}}
-				<p class="hero__subtitle{{#if this.hero.subtitle.class}} {{this.hero.subtitle.class}}{{/if}}"{{#if this.hero.subtitle.id}} id="{{this.hero.subtitle.id}}"{{/if}}{{#if this.hero.subtitle.extraAttributes}} {{#each this.hero.subtitle.extraAttributes}}{{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}} data-theme-template="subtitle">
-					{{{this.hero.subtitle.text}}}
-				</p>
-				{{/if}}
-				{{#if this.hero.titleSubTitleWrapperClass}}</div>{{/if}}
-				{{#this.hero.valueProps}}
-					{{ fileInclude 'src/shared-components/value-props/value-props.html'
-						props = this
-					}}
-				{{/this.hero.valueProps}}
-			</div>
-			{{#unless this.hero.moveHeroContentToTop}}
-				{{#if this.hero.formTemplateInclude}}
-				<div class="hero__content">
-					{{fileInclude this.hero.formTemplateInclude
-						form = this
-					}}
-				</div>
-				{{/if}}
-			{{/unless}}
-		</div>
-	</div>
-</div>

package/src/shared-components/how-it-works/_how-it-works.scss

@@ -1,138 +0,0 @@
-$hiw-content-flex-direction-mobile: row !default;
-$hiw-content-max-width-mobile: 320px !default;
-$hiw-content-width-mobile: 90% !default;
-$hiw-content-align-items-mobile: normal !default;
-$hiw-content-flex-direction-desktop: column !default;
-$hiw-content-max-width-desktop: 100% !default;
-$hiw-content-width-desktop: 80% !default;
-$hiw-content-align-items-desktop: center !default;
-
-$hiw-card-divider: 2px dashed $color-charcoal1 !default;
-$hiw-card-divider-height-mobile: 22px !default;
-$hiw-card-divider-position-left-mobile: 29px !default;
-$hiw-card-divider-position-top-mobile: -30px !default;
-$hiw-card-divider-height-desktop: 100% !default;
-$hiw-card-divider-position-left-desktop: 0 !default;
-$hiw-card-divider-position-top-desktop: -20% !default;
-
-$hiw-card-margin-bottom: 0 !default;
-$hiw-text-align: center !default;
-
-$hiw-icon-height: 100px !default;
-$hiw-icon-width: $hiw-icon-height !default;
-
-$hiw-title-color: $color-charcoal5 !default;
-$hiw-title-font-size: 16px !default;
-$hiw-title-font-weight: bold !default;
-$hiw-title-line-height: 1.2 !default;
-$hiw-title-margin: 15px 0 !default;
-
-$hiw-desc-color: $color-charcoal4 !default;
-$hiw-desc-font-size-mobile: 14px !default;
-$hiw-desc-font-size-desktop: $hiw-desc-font-size-mobile !default;
-$hiw-desc-line-height: 1.57 !default;
-$hiw-desc-margin-mobile: 0 0 15px !default;
-$hiw-desc-margin-desktop: $hiw-desc-margin-mobile !default;
-
-.hiw-card {
-	margin-bottom: $hiw-card-margin-bottom;
-	text-align: $hiw-text-align;
-
-	&__wrapper {
-		margin: auto;
-		max-width: 260px;
-	}
-
-	&__icon {
-		height: $hiw-icon-height;
-		width: $hiw-icon-width;
-	}
-
-	&__title {
-		color: $hiw-title-color;
-		font-size: $hiw-title-font-size;
-		font-weight: $hiw-title-font-weight;
-		line-height: $hiw-title-line-height;
-		margin: $hiw-title-margin;
-	}
-
-	&__description {
-		color: $hiw-desc-color;
-		font-size: $hiw-desc-font-size-mobile;
-		line-height: $hiw-desc-line-height;
-		margin: $hiw-desc-margin-mobile;
-	}
-}
-
-.hiw-block__content {
-	display: block;
-	margin: 0 auto;
-	max-width: $hiw-content-max-width-mobile;
-	text-align: left;
-	width: $hiw-content-width-mobile;
-
-	.hiw-card {
-		flex: 1;
-		position: relative;
-		text-align: left;
-
-		&__wrapper {
-			align-items: $hiw-content-align-items-mobile;
-			display: flex;
-			flex-direction: $hiw-content-flex-direction-mobile;
-			max-width: 100%;
-		}
-
-		&__icon {
-			min-height: $hiw-icon-height;
-			min-width: $hiw-icon-width;
-		}
-
-		~ .hiw-card {
-			&:before{
-				border-left: $hiw-card-divider;
-				content: '';
-				height: $hiw-card-divider-height-mobile;
-				left: $hiw-card-divider-position-left-mobile;
-				position: absolute;
-				top: $hiw-card-divider-position-top-mobile;
-				width: 1px;
-			}
-		}
-	}
-}
-
-@include breakpoint-sm {
-	.hiw-block__content {
-		align-items: center;
-		display: flex;
-		max-width: $hiw-content-max-width-desktop;
-		text-align: $hiw-text-align;
-		width: $hiw-content-width-desktop;
-
-		.hiw-card {
-			text-align: $hiw-text-align;
-
-			&__wrapper {
-				align-items: $hiw-content-align-items-desktop;
-				flex-direction: $hiw-content-flex-direction-desktop;
-			}
-
-			~ .hiw-card {
-				&:before {
-					height: $hiw-card-divider-height-desktop;
-					left: $hiw-card-divider-position-left-desktop;
-					top: $hiw-card-divider-position-top-desktop;
-					transform: rotate(90deg);
-				}
-			}
-		}
-	}
-
-	.hiw-card {
-		&__description {
-			font-size: $hiw-desc-font-size-desktop;
-			margin: $hiw-desc-margin-desktop;
-		}
-	}
-}

package/src/shared-components/how-it-works/how-it-works.html

@@ -1,19 +0,0 @@
-{{#xif "!this.carouselOptions"}}
-<ul class="hiw-block__content">
-{{/xif}}
-{{#each this.items}}
-	<li class="{{#if ../this.carouselOptions}}swiper-slide {{/if}}hiw-card{{#if ../this.classModifier}} {{../this.classModifier}}{{/if}}">
-		<div class="hiw-card__wrapper">
-			{{#if this.illustration}}
-			<svg class="hiw-card__icon" role="img">
-				<use href="{{#unless this.isLocalSrc}}{{#xif 'isLocal === "true"'}}/temp/assets{{else}}https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets{{/xif}}{{/unless}}{{this.illustration}}"></use>
-			</svg>
-			{{/if}}
-			{{#if this.title}}<p class="hiw-card__title">{{{this.title}}}</p>{{/if}}
-			{{#if this.description}}<p class="hiw-card__description">{{{this.description}}}</p>{{/if}}
-		</div>
-	</li>
-{{/each}}
-{{#xif "!this.carouselOptions"}}
-</ul>
-{{/xif}}