<template>
	<div class="maintenance-box">
		<VindiLogo
			class="maintenance-box__logo"
			height="4rem"
		/>
		<div class="maintenance-box__content">
			<div class="maintenance-box__title">
				{{ $t('MAINTENANCE_TITLE') }}
			</div>
			<p class="maintenance-box__subtitle">
				{{ $t('MAINTENANCE_DESC') }}
			</p>
		</div>
	</div>
</template>

<style lang="scss">
.maintenance-box {
	@include padding(20, t);

	display: flex;
	flex-direction: column;
	align-items: center;

	&__logo {
		@include margin(9, y);
	}

	&__content {
		@include padding(4);
		@include rounded(xl);

		background-color: var(--color-shade-2);
		text-align: center;
		width: 24rem;
	}

	&__title {
		@include padding(3, b);
		@include font-size(lg);
		@include font-weight(bold);
	}

	&__subtitle {
		opacity: 0.8;
	}
}
</style>