.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: calc(6 * var(--spacing));

	.page-header-left, .page-header-right {
		display: flex;
		align-items: center;
		gap: calc(1 * var(--spacing));
	}

	.image {
		margin-right: calc(5 * var(--spacing));
		width: calc(12 * var(--spacing));
		height: calc(12 * var(--spacing));
	}

	.page-header-back-btn {
		margin-right: calc(5 * var(--spacing));
	}

	.page-header-span {
		font-size: var(--text-lg);
	}

	h1, h2 { margin-bottom: 0 }
}

.layout-rows {
	display: flex;
	flex-direction: column;
	gap: calc(3 * var(--spacing));

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--reverse {
		flex-direction: column-reverse;
		justify-content: start;
	}
}

.layout-cols {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--spacing));

	&.--equal {
		> * {
			flex: 1;
		}
	}

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--space-between {
		justify-content: space-between;
	}

	&.--wrap {
		flex-wrap: wrap;
	}
}

.layout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(3 * var(--spacing));

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--lg {
		gap: calc(6 * var(--spacing));
	}

	&.--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.layout-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.text-with-icon {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	&.--sm {
		gap: calc(2 * var(--spacing));

		svg {
			width: calc(3 * var(--spacing));
			height: calc(3 * var(--spacing));
		}
	}

	&.--lg {
		gap: calc(3 * var(--spacing));

		svg {
			width: calc(5 * var(--spacing));
			height: calc(5 * var(--spacing));
		}
	}

	&.--xl {
		svg {
			width: calc(7 * var(--spacing));
			height: calc(7 * var(--spacing));
		}
	}

	&.--xxl {
		svg {
			width: calc(8 * var(--spacing));
			height: calc(8 * var(--spacing));
		}
	}

	&.--xxxl {
		svg {
			width: calc(9 * var(--spacing));
			height: calc(9 * var(--spacing));
		}
	}

	&.--orange {
		svg {
			color: var(--color-orange);
			background-color: var(--color-orange-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--green {
		svg {
			color: var(--color-emerald);
			background-color: var(--color-emerald-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--blue {
		svg {
			color: var(--color-sky);
			background-color: var(--color-sky-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--pink {
		svg {
			color: var(--color-pink);
			background-color: var(--color-pink-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--gray {
		svg {
			color: var(--color-neutral-600);
			background-color: var(--color-neutral-50);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}
}

.actions-column {
	width: calc(12 * var(--spacing));
	padding: 0;
}

.mobile-only {
	display: none;
	@media (width < 40rem) { display: initial }
}

.no-mobile {
	@media (width < 40rem) { display: none }
}