:root {
	--card-left-header-size: 2em;
	--card-left-normal-size: 1em;
	--card-left-button-size: 1em;
	--card-right-header-size: 1.35em;
	--card-right-subheader-size: 1em;
	--card-right-normal-size: 1.15em;
}

.card-left {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.card-left > .card-header {
	position: relative;
	text-align: right;
	font-size: var(--card-left-header-size);
	color: var(--text-color-heavy-black);
}

.card-left > .card-header::after {
	position: absolute;
	content: 'UNLOCK';
	font-size: 0.5em;
	color: white;
	background-color: var(--text-color-orange);
	top: -1.35em;
	right: 0;
	padding: 0.1em 1em;
	border-radius: 5em;
}

.card-left > .card-para-text {
	margin: 0.5em 0;
	width: 70%;
	text-align: right;
	line-height: 1.375em;
	font-size: var(--card-left-normal-size);
	color: var(--text-color-heavy-black);
}

.card-left > .card-ul {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-bottom: 1em;
}

.card-left > .card-ul > .card-para-dot {
	text-align: right;
	font-size: var(--card-left-normal-size);
	color: var(--text-color-normal-black);
}

.card-left > .card-ul > .card-para-dot::after {
	display: inline-block;
	margin: 0 0.15em;
	margin-left: 0.3em;
	height: 0.65em;

	aspect-ratio: 1/1;
	content: '';
	border-radius: 50%;
	border: 0.1em solid var(--text-color-light-black);
}

.card-left > .card-button,
.card-button {
	font-size: var(--card-left-button-size);
	color: var(--text-color-light-black);
	border: 0.1em solid var(--text-color-normal-black);
	background-color: transparent;
	padding: 0.2em 1em;
	text-align: center;
}

.card-button:hover {
	background-color: var(--text-color-orange);
	color: white;
}

.card-button-mobile {
	display: none;
}

#svg-grill > img {
	width: 100%;
}

.card-right {
	display: flex;
	flex-direction: column;
}

.card-right > .card-header {
	font-weight: 1000;
	font-size: var(--card-right-header-size);
	margin-bottom: 0.5em;
	letter-spacing: 0.2em;
	color: var(--text-color-orange);
}

.card-right > .card-sub-header {
	font-size: var(--card-right-subheader-size);
	color: var(--text-color-normal-black);
	letter-spacing: 0.2em;
}

.card-right > .card-cow-img {
	margin: 1% 1%;
}

.card-right > .card-cow-img > img {
	width: 50%;
}

.card-right > .card-para-text {
	padding-right: 2em;
	max-width: 30ch;
	font-size: var(--card-right-normal-size);
	color: var(--text-color-light-black);
}

@media (max-width: 600px) {
	.card-left {
		width: 100%;
		align-items: center;
		font-size: 3.5vw;
	}

	.card-left > .card-header {
		text-align: center;
	}

	.card-left > .card-header::after {
		font-size: 0.35em;
		top: -2em;
		right: 50%;
		transform: translateX(50%);
	}

	.card-left > .card-ul {
		flex-direction: row;
		gap: 0.5em;
	}

	.card-left > .card-ul > .card-para-dot {
		font-size: 0.65em;
		text-align: center;
		color: var(--text-color-light-black);
	}

	.card-left > .card-ul > .card-para-dot::after {
		display: none;
	}

	.card-left > .card-para-text {
		text-align: center;
		width: 100%;
	}

	.card-left > .card-button {
		display: none;
	}

	#svg-grill > img {
		padding: 10% 8%;
	}

	.card-button-mobile {
		display: block;
		padding: 0.5em 3em;
		margin-top: 0.7em;
		font-size: 3vw;
	}

	.card-right {
		align-items: center;
		font-size: 3.5vw;
	}

	.card-right > .card-header {
		margin-top: 2em;
	}

	.card-right > .card-cow-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin: 10% 0;
	}

	.card-right > .card-para-text {
		text-align: center;
		text-justify: auto;
		max-width: 33ch;
	}
}