<script setup lang="ts">
	export default {
		props: {
			numberValue: {type: String, required: true},
			freeText: {type: String, required: true},
			imgSrc: {type: String, required: true},
		}
	}
</script>

<template>
	<div class="counter-block">
		<div class="columns">
			<div class="column">
				<div class="big-number">
					{{ numberValue }}
				</div>
				<br/>
				<div class="text-description">
					{{ freeText }}
				</div>
			</div>
			<div class="column">
				<img :src="imgSrc" class="picture has-rounded-corners"/>
			</div>
		</div>
	</div>
</template>

<style lang="scss">
	.counter-block {
		.big-number {
			font-weight: 600;
			font-size: 140px;
			line-height: 90%;
			letter-spacing: -0.04em;
			color: #020225;
		}

		.text-description {
			font-weight: 400;
			font-size: 10px;
			line-height: 150%;
			text-align: center;
			text-transform: uppercase;
			color: #020225;
		}

		img {
			margin-left: 80px;
			border-radius: 80px;
		}
	}
</style>
