/* ==========================================================================
   Approach: principles
   ========================================================================== */

.principles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

.principle {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--ace-paper);
	transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}

@media (hover: hover) {
	.principle:hover {
		transform: translateY(-6px);
		box-shadow: 0 24px 48px -28px rgba(14, 28, 54, 0.35);
	}
}

.principle__num {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--ace-gold);
}

.principle__title {
	margin-top: var(--space-5);
	font-size: var(--fs-h3);
	font-weight: 350;
}

.principle__text {
	color: var(--text-secondary);
	font-size: var(--fs-small);
}