._characterGrid_1cgrb_1 {
	display: grid;
	margin: 0 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	grid-auto-rows: min-content;
	gap: 12px;
	/* padding-bottom: 24px; */
}

._snippetContainer_1cgrb_10 {
	position: relative;
	width: 100%;
	min-height: 0;
	aspect-ratio: 1 / 1;

	border: 1px solid var(--color-accent);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: inherit;
	padding: 0;
	display: block;
}

._snippetContainer_1cgrb_10:hover {
	border: 6px solid var(--color-accent);
	cursor: pointer;
}

._title_1cgrb_30 {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0;
	padding: 2px;
}

._footer_1cgrb_38 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	margin: 0;
	padding: 2px;
}

._spriteWrapper_1cgrb_46 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	z-index: -1;
}

._spriteContainer_1cgrb_59 {
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	display: block;
}
._layoutArea_1ano2_1 {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	gap: 0;
}

._snippetList_1ano2_9 {
	overflow-y: auto;
	flex: 1 0 0;
	margin: 1.2rem 0;
}

._contentArea_1ano2_15 {
	flex: 1 0 0;
	margin: 1.2rem 1.2rem 1.2rem 0;
}

@media (max-width: 599px) {
	._snippetList_1ano2_9,
	._contentArea_1ano2_15 {
		width: 100%;
		flex: 1;
		margin: 1.2rem 0 0 0;
	}

	._inactivePanel_1ano2_28 {
		display: none;
	}

	._activePanel_1ano2_32 {
		display: block;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	._snippetList_1ano2_9 {
		overflow-y: auto;
		flex: 2 0 0;
	}

	._contentArea_1ano2_15 {
		flex: 4 0 0;
	}
}

@media (min-width: 1024px) {
	._snippetList_1ano2_9 {
		overflow-y: auto;
		flex: 2 0 0;
	}

	._contentArea_1ano2_15 {
		flex: 6 0 0;
	}
}