#pixelpro-popup {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(5px);
	position: fixed;
	inset: 0;
	opacity: 0;
	z-index: 10;
	pointer-events: none;
	transition: 0.2s ease-out;

	&.active {
		opacity: 1;
		pointer-events: all;

		.popup-inner {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.popup-inner {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 920px;
		height: auto;
		padding: 2rem;
		margin: 0 2rem;
		position: relative;
		background-color: var(--color-neutral-white);
		transform: translateY(50px);
		border-radius: 10px;
		box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.1);
		transition: 0.2s ease-out;
		animation: fade-up 0.5s cubic-bezier(0, 0, 0.23, 1.66);

		.popup-close {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 24px;
			height: 24px;
			position: absolute;
			top: 1rem;
			right: 1rem;
			background-color: var(--color-neutral-white);
			border: 1px solid var(--color-copytext);
			outline: 10px solid var(--color-neutral-white);
			border-radius: 9999px;
			cursor: pointer;
			transition: 0.2s ease-out;

			&:hover {
				border-color: var(--color-brand-primary);
				transform: rotate(90deg);

				span {
					background-color: var(--color-brand-primary);
				}
			}

			span {
				width: calc(100% - 10px);
				height: 1px;
				position: absolute;
				top: 50%;
				background-color: var(--color-copytext);
				transition: 0.2s ease-out;

				&:nth-child(1) {
					transform: rotate(45deg);
				}

				&:nth-child(2) {
					transform: rotate(-45deg);
				}
			}
		}

		.popup-content {
			&.has-image {
				display: grid;
				grid-template-columns: 1fr 2fr;
				grid-gap: 1.75rem;

				@media (max-width: 767px) {
					display: flex;
					flex-direction: column;

					.popup-media {
						max-height: 200px;
					}
				}

				.popup-media img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.popup-column {
				display: flex;
				flex-direction: column;
				width: 100%;

				&.popup-media {
					border-radius: 10px;
					overflow: hidden;
				}
			}

			.popup-button-wrap {
				margin-top: 2rem;
			}

			h1, h2 {
				font-size: 2.25rem;
				color: var(--color-brand-primary);
			}

			h3 {
				font-size: 1.5rem;
			}

			p, a, li {
				font-size: 1.25rem;
			}

			ul  {
				list-style: square;
				padding-left: 1em;

				li {
					padding: 3px 0;

					&:first-child {
						padding-top: 0;
					}

					&:last-child {
						padding-bottom: 0;
					}
				}
			}

			p + ul {
				margin-top: 6px;
			}
		}
	}
}

@keyframes fade-up {
	0% { opacity: 0; transform: scale(0) translateY(50px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}