/* ==========================================================================
   Page: 404
   Figma: 404 EN D1920 (4193:35602) — exact node values.
   RTL: logical; art moves to inline-end.
   ========================================================================== */

.mada-404 {
	background-color: var(--color-white);
	padding-block: var(--pad-section-last-top) var(--pad-section-last-bottom);
}
.mada-404__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
	display: flex;
	flex-direction: column;
	gap: var(--space-13);
	align-items: center;
}
.mada-404__text {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-11);                        /* 40 */
	align-items: flex-start;
}
.mada-404__code {
	margin: 0;
	display: flex;
	gap: var(--space-3);
	align-items: center;
	font-size: var(--fs-5xl);                    /* 48 */
	font-size: 48px;
	line-height: 58px;
	color: var(--color-neutral-600);
}
.mada-404__error { font-weight: var(--fw-medium); }
.mada-404__code strong { font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.mada-404__text h1 {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-banner);
	line-height: var(--lh-banner);
	letter-spacing: var(--ls-none);
	color: var(--color-black);
}
.mada-404__art { flex: 0 0 auto; inline-size: min(400px, 80vw); block-size: auto; }

@media (max-width: 639px) {
	.mada-404__code, .mada-404__text h1 { font-size: var(--fs-banner); line-height: var(--lh-banner); }
	.mada-404__text { align-items: center; text-align: center; }
}
@media (min-width: 1025px) {
	.mada-404__inner { flex-direction: row; justify-content: space-between; }
}