.whitelist-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--color-white);
	border-radius: 0.25rem;
	border: 1px solid var(--color-accent);
	
	.whitelist-memo {
		font-size: 1rem;
		text-align: center;
	}
	
	.whitelist-status {
		font-size: 0.75rem;
		text-align: center;
	}
	
	.whitelist-banner-close {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
	}
}

.whitelist-page {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: center;
	
	h1, h2 {
		text-align: center;
	}
	
	p,
	.character-grid,
	.character-status {
		width: 60rem;
		max-width: 100%;
	}
	
	.character-grid {
		display: grid;
		gap: 1rem;
		grid-template-columns:  repeat(auto-fill, minmax(8rem, 1fr));
		justify-items: center;		
	}
	
	.character-status {
		display: grid;
		column-gap: 1rem;
		row-gap: 2rem;
		grid-template-columns:  repeat(auto-fill, minmax(14.25rem, 1fr));
		
		.status {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.5rem;
			
			
			h3 {
				border-bottom: 1.5px solid var(--color-text-accent);
				margin-bottom: 0.5rem;
			}
			
		}
	}
}