<template>
<section class="about">
			<div class="about__image-wrapper">
				<picture>
					<source srcset="~/assets/images/home_about.avif"    />
					<img alt="درباره پارس مگا"
						class="about__image"
						width="420" height="267"
						loading="lazy"
						decoding="async"
						src="~/assets/images/home_about.jpg" />
				</picture>
			</div>
			<mini-title class="about__mini-title">
				{{ $t("about pars mega") }}
			</mini-title>
			<h2 class="about__title">
				{{ $t("home about title") }}
			</h2>
			<p class="about__description">
				{{ $t("home about description") }}
			</p>
			<nuxt-link :to="localePath('/about-us')"
					   class="about__link">
				{{ $t("read more") }}
			</nuxt-link>
		</section>
</template>
<script>
import miniTitle from "@/components/shared/other/section_mini_title";
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "HomeAboutSection",
	components: {
		miniTitle,
		LazyHydrate
	}
};
</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;

	&__image-wrapper {
		border-radius: $border-radius;
		display: block;
		overflow: hidden;
		position: relative;

		&:after {
			content: "";
			display: block;
			padding-top: 63.57%;
		}
	}

	&__image {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__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;
		}
	}

	@media (min-width: $desktop) {
		&:after {
			clear: both;
			content: "";
			display: block;
		}

		&__image-wrapper {
			float: left;
			margin-right: $padding-default * 2;
			width: 42%;
		}

		&__mini-title {
			font-size: 16px;
		}

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

		&__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) {
			&__image-wrapper {
				float: right;
				margin-left: $padding-default * 2;
				margin-right: 0;
			}

			&__title {
				margin-left: 0;
				margin-right: auto;
			}
		}
	}
}
</style>