.popup-story-overlay {
	position: absolute;
	inset: 0;
	z-index: 99999999;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: center;

	> div {
		position: absolute;
		inset: 0;
		transition: all 0.25s;
		background-color: rgba(168, 216, 255, 1);
		z-index: -1;
		background-image: linear-gradient(-45deg, #6a6ae2, #b735de, #6b90ff, #df5be6);
		background-size: 400% 400%;
		animation: gradient 15s ease infinite;

		@keyframes gradient {
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}
		}
	}

	> section {
		display: flex;
		max-width: 100%;
		max-height: 100%;
		align-items: center;
		justify-content: center;
		color: white;
		gap: 1rem;
		aspect-ratio: 9/16;
		overflow: hidden;
		flex-grow: 1;
		background-color: rgba(0, 0, 0, 0.75);
		flex-direction: column;
		position: relative;

		> div {
			display: flex;
			flex-grow: 1;
			align-items: center;
			justify-content: center;

			> * {
				flex-grow: 1;
			}
		}

		> a {
			position: absolute;
			background-color: white;
			color: blue;
			font-size: 1.125rem;
			padding: 0.5rem;
			border-radius: 0.5rem;
			line-height: normal;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
			pointer-events: none;
			touch-action: none;
		}

		> span {
			padding: 0.5rem;
			position: absolute;
			inset: 0;
			top: auto;
			text-align: center;
		}
	}

	> svg {
		position: absolute;
		z-index: 10;
		top: 2rem;
		right: 2rem;
		color: white;
		font-size: 2rem;
		cursor: pointer;

		&:hover {
			opacity: 0.75;
		}
	}
}
