.happiness-support {
	display: flex;

	@include breakpoint-deprecated( "<660px" ) {
		flex-wrap: wrap;
	}
}

.happiness-support.is-placeholder {
	.happiness-support__heading,
	.happiness-support__text {
		@include placeholder( --color-text-subtle );
	}

	.happiness-support__heading {
		width: 78%;
	}

	.happiness-support__text {
		width: 82%;
	}

	.happiness-support__image {
		display: none;
	}

	.happiness-support__buttons {
		.button {
			@include placeholder( --color-neutral-10 );
		}
	}
}

.happiness-support__heading {
	color: var(--color-text-subtle);
	clear: none;
	font-size: $font-title-small;
}

.happiness-support__description {
	color: var(--color-text-subtle);
	margin-bottom: 16px;
	margin-top: 16px;
}

.happiness-support__image {
	flex-shrink: 0;
	margin: 0 auto;
	width: 128px;

	@include breakpoint-deprecated( ">660px" ) {
		width: 178px;
	}
}

.happiness-support__icon {
	margin-bottom: 20px;

	@include breakpoint-deprecated( ">660px" ) {
		width: 150px;
		margin: 0 auto;
	}
}

.happiness-support__buttons {
	width: 100%;

	.button {
		@include breakpoint-deprecated( "<480px" ) {
			display: block;
		}

		@include breakpoint-deprecated( ">480px" ) {

			&:first-of-type {
				margin-right: 16px;
				margin-bottom: 6px;
			}
		}
	}

	.happiness-support__support-button {
		padding-bottom: 11px;
		padding-top: 2px;

		@include breakpoint-deprecated( "<480px" ) {
			margin-top: 16px;
		}
	}
}
