.section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.title {
	@include typography.font-header-l;
	color: variables.$text-primary;
	margin: 0;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 0;
	color: variables.$text-tertiary;
}

.emptyText {
	@include typography.font-body-mr;
	color: variables.$text-secondary;
	margin: 0;
}
