.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	text-align: center;
	container-type: inline-size;
}

.identity {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	max-width: 100%;
}

.titleBlock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
	max-width: 100%;
}

@container (min-width: 448px) {
	.identity {
		flex-direction: row;
		gap: var(--s-6);
	}
}

.logo {
	border-radius: var(--radius-avatar);
}

.nameBlock {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s-1);
	width: max-content;
	max-width: 100%;
}

.name {
	font-size: var(--font-xl);
	font-weight: var(--weight-bold);
	margin: 0;
	text-wrap: balance;
	text-align: center;
	line-height: 1.1;
	overflow-wrap: break-word;
}

.subtext {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);

	&::before,
	&::after {
		content: "";
		flex: 1;
		border-bottom: 2px solid var(--color-text-high);
	}
}

.organizer {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--color-text);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
}

.dates {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	color: var(--color-text-high);
}

.actions {
	display: flex;
	gap: var(--s-2);
	align-items: center;
	justify-content: center;
}