.popup
	{
		position: fixed !important;

		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;

		display: flex;
		align-items: center;
		justify-content: center;

		background-color: rgba( 0, 0, 0, 0.4 );

		z-index: 2000;

	}

.popup > *
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 100%;
	}

.popup > * > *
	{
		display: block;
		position: relative;
		--template-width: 1080px;
		width: 100%;
		max-width: 1080px;
		max-height: calc( var( --body-height ) - 40px );
		overflow-y: auto;
		background: transparent;
		transition: max-width 0.25s ease-in-out;
	}

.popup:is( [data-span~="small" ] ) > * > *
	{
		max-width: 600px;
	}

.popup-controls
	{
		position: absolute;
		width: 100%;
		z-index: 10;
	}

.popup .page
	{
		background: transparent;
	}

.popup .page > *
	{
		padding: unset;
	}

.popup .page > :is( [data-span~="span-1"] ) .owl-carousel
	{
		max-width: 100%;
	}