:root {
	color: #fff8e8;
	font-family: system-ui, sans-serif;
	background: #25384a;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

body {
	inline-size: 45rem;
	block-size: 15rem;
	margin: 0;
}

.fixed-surface {
	position: relative;
	inline-size: 45rem;
	block-size: 15rem;
	padding: 1rem;
	background:
		linear-gradient(90deg, rgb(255 255 255 / .12) 1px, transparent 1px) 0 0 / 2rem 2rem,
		linear-gradient(rgb(255 255 255 / .12) 1px, transparent 1px) 0 0 / 2rem 2rem,
		linear-gradient(135deg, #25384a, #7b4c3e);
	border: .5rem solid #e6b566;
}

.fixed-surface__eyebrow,
.fixed-surface__title,
.fixed-surface__description {
	margin: 0;
}

.fixed-surface__eyebrow {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.fixed-surface__title {
	margin-block-start: .25rem;
	font-size: 1.15rem;
}

.fixed-surface__description {
	max-inline-size: 25rem;
	margin-block-start: .4rem;
	font-size: .8rem;
}

.fixed-surface__axis {
	position: absolute;
	inset-block-end: 1rem;
	inset-inline: 1rem;
	font-size: .75rem;
	font-weight: 700;
	text-align: center;
	background: rgb(0 0 0 / .25);
	padding-block: .25rem;
}