.palette {
	--col-no: 1;

	overflow: hidden;
	display: grid;
	margin-block: 1rem;
	grid-template-columns: repeat(var(--col-no), 1fr);
	height: 50vh;
	border: 0.1rem solid var(--cyan);
	border-radius: 0.5rem;
	transition: all 0.2s ease-in-out;

	>* {
		--color: var(--text);

		display: inline;
		text-align: right;
		writing-mode: vertical-lr;
		padding-bottom: 20%;
		padding-block: calc(50% - calc(1.6em / 2));
		font-size: 0.9em;
		text-transform: uppercase;
		overflow: hidden;
		background-color: var(--color);
		color: #000;

		&.dark {
			color: #FFF;
		}
	}
}

a:has(.palette) {
	text-decoration: none;

	&:hover .palette {
		border: 0.1rem solid var(--yellow);
	}
}