.characterBox {
display: flex;
gap: 30px 2%;
flex-wrap: wrap;
}
.characterBox .item{
width: 32%;
}
@media screen and (max-width: 639px) {
.characterBox .item{
width: 49%;
}
}
#Event .characterBox .item p.summary{
	font-size: 1rem;
	padding: 10px;
	color: #222;
}
.item.purple {
	background-color: #F6EFFF;
}
.item.red {
	background-color: #FFEFF4;
}
.item.green {
	background-color: #EEFFF9;
}
.item.blue {
	background-color: #EFF4FF;
}
.item.black {
	background-color: #F6EFFF;
}
.item.white {
	background-color: #fff9f1;
}
.item.null{
	background-color: #eee;
}