/* Keep supplied artwork intact. Portrait mobile artwork is supplied by the ad. */
.ii-welcome-ad {
	--ii-welcome-width: min(1000px, calc(100vw - 48px), calc((100dvh - 80px) * var(--ii-welcome-ratio, 1.333333)));
	width: var(--ii-welcome-width) !important;
	max-width: var(--ii-welcome-width) !important;
	overflow: visible;
}

.ii-welcome-ad .ii-welcome-ad {
	width: 100% !important;
	max-width: 100% !important;
}

.ii-welcome-ad img,
.ii-welcome-ad video {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: calc(100vh - 80px);
	max-height: calc(100dvh - 80px);
	object-fit: contain;
}

.ii-welcome-ad iframe {
	display: block;
	width: var(--ii-welcome-width);
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border: 0;
}

@media (max-width: 767px) {
	.ii-welcome-ad {
		--ii-welcome-width: min(calc(100vw - 48px), calc((100dvh - 80px) * var(--ii-welcome-ratio, 0.75)));
	}

	.ii-welcome-ad iframe {
		aspect-ratio: 3 / 4;
	}
}

/* Override the plugin's inline 15px button without changing its click handler. */
.ii-welcome-ad > a[class$="-close-button"] {
	position: absolute !important;
	top: 0;
	right: 0 !important;
	transform: translate(50%, -50%);
	display: grid;
	place-items: center;
	width: 2.5rem !important;
	height: 2.5rem !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	border: 0;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: 0 3px 12px rgb(0 64 68 / 20%);
	color: var(--color-brand-dark);
	font-size: 0;
	line-height: 1 !important;
	text-decoration: none;
	transition: transform var(--transition-fast), color var(--transition-fast);
}

.ii-welcome-ad > a[class$="-close-button"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.8rem;
	height: 0.8rem;
	background: currentColor;
	-webkit-mask: url("../icons/ui/close.svg") center / contain no-repeat;
	mask: url("../icons/ui/close.svg") center / contain no-repeat;
}

.ii-welcome-ad > a[class$="-close-button"]:is(:hover, :focus-visible) {
	color: var(--color-brand);
	transform: translate(50%, -50%) scale(1.06);
}