@import '../../../../../../assets/styles/includes/all-includes';

.block-text {
	padding: $spacing*8  $spacing;

	// Alignment
	&.mod--center {
		text-align: center;
	}

	&.mod--right {
		text-align: right;
	}

	// Backgrounds, Shadows & Gradients
	


	// Elements

	&__title {
		width: 90%;
		max-width: none;

		margin-left: auto;
		margin-right: auto;
		color: $color-dark;
		text-align: center;
		font-weight: $font-weight-thick;
		margin-bottom: $spacing/2;


		@include media(palm) {
			width: 100%;
			font-size: $font-size-gamma;
			line-height: $line-height-nano;
		}
		
		@include media(lap) {
			font-size: $font-size-alpha;
			line-height: $line-height-nano;
		}
		
		@include media(desk) {
			font-size: $font-size-deci;
		}

	}

	&__content {
		margin-bottom: $spacing*4;
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		font-size: $font-size-alpha;
		text-align: center;

		::ng-deep {
			h1, p {
				max-width: none;
				margin-bottom: 0;
			}
		}

		@include media(palm) {
			width: 100%;
			font-size: $font-size-gamma;
		}
		
		@include media(lap) {
			font-size: $font-size-deci;
		}
		
		@include media(desk) {
			font-size: $font-size-deci;
		}

	}


	&__cta {
		display: flex;
		flex-direction: row;

		button {
			margin-left: auto;
			margin-right: auto;
		}

		&.mod--align-left {
			justify-content: flex-start;
		}

		&.mod--align-center {
			justify-content: center;
		}

		&.mod--align-right {
			justify-content: flex-end;
		}
	}


	&__image {
		max-width: 250px;

		@include media(palm) {
			max-width: 180px;
		}

	}

	
}