#home-mascot
{
	display: flex;
	justify-content: flex-end;
	position: absolute;
	z-index: 20;
	inset: 0;
	right: 7rem;
	pointer-events: none;

	@media (max-width: 1536px)
	{
		right: 4rem;
	}

	@media (max-width: 1280px)
	{
		right: 1rem;
	}

	@media (max-width: 1151px)
	{
		right: -3rem;
	}

	@media (max-width: 1024px)
	{
		right: -3.5rem;
	}

	@media (max-width: 896px)
	{
		right: -118px;
	}

	@media (max-width: 768px)
	{
		right: -136px;
	}

	@media (max-width: 640px)
	{
		display: none;
	}
	
	> img
	{
		transform-origin: right;
		width: auto;
		height: 100%;
		max-height: 670px;
		object-fit: contain;
		object-position: right top;
		
		max-height: 670px;

		--tw-translate-x: 0px;
		--tw-scale-x: 1;

		transform: translateX(var(--tw-translate-x)) scale(var(--tw-scale-x));

		@media (max-width: 1151px)
		{
			--tw-translate-x: -40px;
			--tw-scale-x: 0.9;
		}

		@media (max-width: 1024px)
		{
			--tw-translate-x: -60px;
			--tw-scale-x: 0.85;
		}

		@media (max-width: 896px)
		{
			--tw-translate-x: -120px;
		}
	}
}

#home-banner2
{
	position: absolute;
	z-index: 30;
	right: 0;
	transform-origin: right;
	border-radius: 35px 0 0 35px;
	background-color: var(--color-primary);
	padding-inline: 2.5rem;
	padding-block: 1.25rem;
	font-weight: 700;
	--tw-translate-y: 415px;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	transform: translateY(var(--tw-translate-y)) scale(var(--tw-scale-x), var(--tw-scale-y));

	@media (max-width: 1536px)
	{
		--tw-translate-y: 390px;
	}

	@media (max-width: 1280px)
	{
		--tw-translate-y: 360px;
		--tw-scale-x: 0.9;
		--tw-scale-y: 0.9;
	}

	@media (max-width: 1024px)
	{
		--tw-translate-y: 320px;
		--tw-scale-x: 0.7;
		--tw-scale-y: 0.7;
	}

	@media (max-width: 896px)
	{
		--tw-translate-y: 250px;
		--tw-scale-x: 0.6;
		--tw-scale-y: 0.6;
	}

	@media (max-width: 640px)
	{
		display: none;
	}
}