@use "@gloria/layout/_mixins.scss" as *;

.c-not-found {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-8);
	width: 100%;
	height: 100%;
	padding: var(--spacing-12) var(--spacing-5) var(--spacing-5);

	&__billboard {
		max-width: 900px;
	}

	&__title {
		margin: var(--spacing-10) 0 0;
		font-weight: var(--font-weight-bolder);

		@include mobile {
			margin: var(--spacing-8) 0 0;
		}
	}

	&__description {
		margin: 0;
	}

	&__title,
	&__description {
		text-align: center;
	}

	@include mobile {
		gap: var(--spacing-5);
	}
}
