<template>
<section class="about">
			 
			<mini-title class="about__mini-title">
				{{ $t("customizationSectionTitle") }}
			</mini-title>
			<h2 class="about__title">
				{{ $t("customizationSectionSubTitle") }}
			</h2>
			<p class="about__description">
				{{ $t("customizationSectionDescription") }}
			</p>
	 
			<arrow-btn href="/contact-us"
					   :title="$t('contact-us')"
					   class="about__continue" />
		</section>
</template>
<script>
import miniTitle from "@/components/shared/other/section_mini_title";
import LazyHydrate from "vue-lazy-hydration";
import arrowBtn from "@/components/shared/other/arrow_btn";
export default {
	name: "HomeAboutSection",
	components: {
		miniTitle,
		LazyHydrate,
		arrowBtn
	}
};
</script>
<style lang="scss" scoped>
.about {
	content-visibility: auto;
	margin: 0 auto;
	max-width: $app-max-width;
	padding: $home-sections-padding $padding-default;
	padding-top: 0;
	position: relative;

	&__title {
		color: $color-text;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.8;
		margin: 0 auto;
		padding: 0;
	}

	&__description {
		color: $color-text--light;
		font-size: 13px;
		line-height: 1.8;
		margin: 0 auto;
		padding: 5px 0;
		text-align: justify;
		text-align-last: right;
	}

	&__link {
		color: $color-text;
		display: inline-block;
		margin-top: 10px;
		text-decoration: none;

		&:hover {
			color: $color-primary;
		}
	}

	&__continue {
		display: block;
		margin-top: $padding-default/2;
	}

	@media (min-width: $desktop) {
 
		padding-bottom: $home-sections-padding--tablet;
 
		&__mini-title {
			font-size: 16px;
		}

		&__title {
			font-size: 20px;
			margin-right: 0; 
		}

		&__description {
			font-size: 14px;
		}
	}
}

[data-lang="en"] {
	.about {
		&__description {
			text-align: justify;
			text-align-last: left;
		}

		&__title {
			line-height: 1.3;
		}

		@media (min-width: $desktop) {
	 
			&__title {
				margin-left: 0;
				margin-right: auto;
			}
		}
	}
}
</style>