Edit

Editing: hello-plus-hero.scss

@use "../../../../dev/scss/variables";

.ehp-hero {
	--hero-box-height: auto;
	--hero-box-full-height: 100vh;

--hero-content-position: center;
	--hero-content-text-align: center;
	--hero-content-text-gap: 20px;

--hero-text-heading-width: 100%;
	--hero-text-subheading-width: 100%;

--hero-text-width-heading: 800px;
	--hero-text-width-subheading: 440px;

--hero-heading-color: #28292B;
	--hero-subheading-color: #28292B;

--hero-button-primary-icon-spacing: 10px;
	--hero-button-primary-icon-size: 16px;
	--hero-button-primary-text-color: #{variables.$global-colors-white};
	--hero-button-primary-text-color-hover: #{variables.$global-colors-text};
	--hero-button-primary-border-width: 0;
	--hero-button-primary-border-color: transparent;

display: flex;
	flex-direction: column;
	height: var(--hero-box-height);
	text-align: var(--hero-content-text-align);
	padding-block-end: var(--hero-box-padding-block-end);
	padding-block-start: var(--hero-box-padding-block-start);
	padding-inline-end: var(--hero-box-padding-inline-end);
	padding-inline-start: var(--hero-box-padding-inline-start);

@supports (height: 100dvh) {
		--hero-box-full-height: 100dvh;
	}

@mixin full-height($min: null, $max: null) {
		$query: null;

@if $min != null and $max != null {
			$query: "(min-width: " + $min + ") and (max-width: " + $max + ")";
		} @else if $max != null {
			$query: "(max-width: " + $max + ")";
		} @else if $min != null {
			$query: "(min-width: " + $min + ")";
		}

@if $query != null {
			@media #{$query} {
				--hero-box-height: var(--hero-box-full-height, 100vh);

.ehp-hero__image {
					align-items: flex-end;
					display: flex;
					flex-grow: 1;
					justify-content: var(--hero-content-text-align);
				}
			};
		}
	}

&.is-full-height-mobile {
		@include full-height(null, variables.$screen-mobile-max);
	}

&.is-full-height-mobile_extra {
		@include full-height(variables.$screen-mobile-extra-min, variables.$screen-mobile-extra-max);
	}

&.is-full-height-tablet {
		@include full-height(variables.$screen-tablet-min, variables.$screen-tablet-max);
	}

&.is-full-height-tablet_extra {
		@include full-height(variables.$screen-tablet-extra-min, variables.$screen-tablet-extra-max);
	}

&.is-full-height-laptop {
		@include full-height(variables.$screen-laptop-min, variables.$screen-laptop-max);
	}

&.is-full-height-desktop {

@include full-height(variables.$screen-desktop-min, null);

&.is-full-height-widescreen {
			@include full-height(variables.$screen-desktop-min, variables.$screen-desktop-max);
		}
	}

&.is-full-height-widescreen {
		@include full-height(variables.$screen-widescreen-min, null);
	}

&__text-container {
		align-items: var(--hero-content-position);
		display: flex;
		flex-direction: column;
	}

&__button-container {
		align-items: var(--hero-content-position);
		display: flex;
		flex-direction: column;
		margin-bottom: 68px;
	}

& a.ehp-hero__button,
	& a.ehp-hero__button:not([href]):not([tabindex]) {
		--ehp-button-primary-icon-spacing: var(--hero-button-primary-icon-spacing);
		--ehp-button-primary-icon-size: var(--hero-button-primary-icon-size);
		--ehp-button-primary-text-color: var(--hero-button-primary-text-color);
		--ehp-button-primary-text-color-hover: var(--hero-button-primary-text-color-hover);
		--ehp-button-primary-border-width: var(--hero-button-primary-border-width);
		--ehp-button-primary-border-color: var(--hero-button-primary-border-color);
		--ehp-button-primary-padding-block-end: var(--hero-button-primary-padding-block-end);
		--ehp-button-primary-padding-block-start: var(--hero-button-primary-padding-block-start);
		--ehp-button-primary-padding-inline-end: var(--hero-button-primary-padding-inline-end);
		--ehp-button-primary-padding-inline-start: var(--hero-button-primary-padding-inline-start);
		--ehp-button-primary-border-radius-block-end: var(--hero-button-primary-border-radius-block-end);
		--ehp-button-primary-border-radius-block-start: var(--hero-button-primary-border-radius-block-start);
		--ehp-button-primary-border-radius-inline-end: var(--hero-button-primary-border-radius-inline-end);
		--ehp-button-primary-border-radius-inline-start: var(--hero-button-primary-border-radius-inline-start);
	}

& .ehp-image {
		--ehp-image-height: var(--hero-image-height);
		--ehp-image-min-height: var(--hero-image-min-height);
		--ehp-image-position: var(--hero-image-position);
		--ehp-image-width: var(--hero-image-width);
		--ehp-image-border-color: var(--hero-image-border-color);
		--ehp-image-border-width: var(--hero-image-border-width);
		--ehp-image-border-radius-block-end: var(--hero-image-border-radius-block-end);
		--ehp-image-border-radius-block-start: var(--hero-image-border-radius-block-start);
		--ehp-image-border-radius-inline-end: var(--hero-image-border-radius-inline-end);
		--ehp-image-border-radius-inline-start: var(--hero-image-border-radius-inline-start);
	}

&__heading {
		color: var(--hero-heading-color);
		margin: 0;
		max-width: var(--hero-text-width-heading);
	}

&__subheading {
		color: var(--hero-subheading-color);
		margin: 0;
		max-width: var(--hero-text-width-subheading);
	}

&__heading,
	&__subheading {
		margin-bottom: var(--hero-content-text-gap);
	}
}

Back