.view360{
	--aspet-ratio : 1004/560;
	--color-light : rgb( 239, 239, 238 );
	--color-dark  : rgb( 26, 60, 71 );
	--color-red   : rgb( 231, 51, 49);
}
	@media screen and ( max-width : 988px )
	{
		.view360{
			--aspet-ratio : 668/630;
		}
	}

	.view360__wrapper{
		position        : relative;
		display         : flex;
		justify-content : stretch;
		align-items     : stretch;
		flex-wrap       : nowrap;
		max-width       : 100%;
		aspect-ratio    : var( --aspet-ratio );
		overflow        : hidden;
	}
	.view360__preview-image{
		position            : absolute;
		left                : 0px;
		top                 : 0px;
		z-index             : 1;
		flex                : 1 1 100%;
		height              : 100%;
		background-size     : cover;
		background-repeat   : no-repeat;
		background-position : top left;
		aspect-ratio        : var( --aspet-ratio );
	}
		.view360__preview-image::after{
			content             : ' ';
			position            : absolute;
			left                : 32px;
			top                 : 32px;
			aspect-ratio        : 162/141;
			width               : 80px;
			background-image    : url('/wp-content/plugins/brandgrad-shortcode-360-view/public/gfx/icon-360view.png');
			background-size     : contain;
			background-repeat   : no-repeat;
			background-position : center center;
		}

	.view360__preview-text{
		margin           : 0px 0px 0px 0px;
		padding          : 32px calc( 33% + 32px) 32px 25%;
		position         : absolute;
		right            : -33%;
		top              : 0px;
		z-index          : 10;
		flex             : 1 1 100%;
		display          : flex;
		flex-wrap        : wrap;
		justify-content  : flex-end;
		align-items      : flex-end;
		align-content    : flex-end;
		width            : 100%;
		max-width        : 100%;
		height           : 100%;
		color            : var(--color-light);
		background-color : var( --color-dark );
		clip-path        : polygon(50% 0, 101% 0, 101% 101%, 0% 101%);
	}
		@media screen and ( max-width : 988px )
		{
			.view360__preview-text{
				padding          : 32px 32px 32px 50%;
				right            : 0%;
			}
		}


	h2.view360__preview-title{
		margin-bottom       : 13px;
		flex                : 1 1 100%;
		font-size           : 30px;
		font-weight         : 600;
		color               : var(--color-light);
	}
		@media screen and ( max-width : 988px )
		{
			h2.view360__preview-title{
				margin-bottom       : 13px;
				font-size           : 22px;;
			}
		}

	a.view360__preview-cta{
		margin-bottom       : 32px;
		position            : relative;
		flex                : 1 1 0%;
		font-size           : 16px;
		font-weight         : 600;
		text-transform      : uppercase;
		color               : var(--color-light);
	}
		a.view360__preview-cta .view360__preview-cta-icon{
			position : relative;
			left     :  2px;
			top      :  6px;
			width    : 12px;
			height   : 12px;
		}

	p.view360__preview-privacy{
		flex                : 1 1 100%;
		font-size           : 14px;
		color               : var(--color-light);
	}
	p.view360__preview-privacy a {
		color               : var(--color-red);
		text-decoration     : underline;
	}
		@media screen and ( max-width : 988px )
		{
			p.view360__preview-privacy{
				font-size : 12px;
			}
		}

	.view360_embed-frame{
		margin           : 0px 0px 0px 0px;
		padding          : 0px 0px 0px 0px;
		position         : absolute;
		left             : 0px;
		top              : 0px;
		z-index          : 20;
		width            : 100%;
		max-width        : 100%;
		height           : 100%;
		border           : 0;
		outline          : 0;
	}