.palette-shades {
	font-style: normal;
	.title {
		line-height: 1.2;
		.name {
			text-transform: uppercase;
			font-weight: bold;
			font-size: 2em;
		}
	}

	ol {
		margin-block: 0;
		padding-left: 1.75em;

		.shade {
			text-transform: uppercase;
			font-weight: bold;
		}
	}

	.grid {
		display: grid;
		grid-gap: 0.1rem;
		font-size: 0.8em;

		span {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0.05rem solid var(--page_color-foreground);
		}

		&.grid-3x3 {
			grid-template-columns: repeat(3, 1fr);

			span {
				width: 1rem;
				height: 1rem;
			}
		}

		&.grid-2x2 {
			grid-template-columns: repeat(2, 1fr);
			span {
				width: 1.2rem;
				height: 1.2rem;
			}
		}
	}

	&.cheetah {
		.grid {
			grid-template-rows: 1fr 1rem;
			.row-1n2 {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 0.1rem;
				span {
					width: 0.9rem;
					height: 0.7rem;
				}
			}
			.row-3 {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 0.1rem;
				span {
					height: 100%;
				}
			}
		}
	}

	&.sumino {
		.grid {
			& > span:nth-child(5) {
				grid-row: 3 / 4;
			}
			& > span:nth-child(6) {
				width: unset;
				height: unset;
				grid-column: 2 / 4;
				grid-row: 2 / 4;
			}
		}
	}

	&.nozomi1 {
		.grid {
			grid-template-columns: repeat(2, 1fr);
			span {
				width: 0.9rem;
				height: 0.7rem;
			}
		}
	}
}