.dialog-style-xyz {
	padding: 0;
	margin: auto;
	background-color: #111314;
	border-radius: 0.5rem;
	color: #fff;
	border: none;
	max-width: 32em;
	position: relative; /* For `relative` class */
}

.dialog-button {
	padding: 0.5rem;
	border: none;
	outline: none;
	color: white;
	cursor: pointer;
	background: none;
	position: absolute; /* For `absolute` class */
	top: 1rem; /* For `top-4` class */
	right: 1rem; /* For `right-4` class */
}

.dialog-style-xyz > .dialog-inner {
	padding: 0;
	overflow: hidden; /* For `modal-content` class */
}

.dialog-style-xyz::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.dialog-style-xyz[open] {
	animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zoom {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
	}
}

.dialog-style-xyz[open]::backdrop {
	animation: fade 0.2s ease-out;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.iframe-responsive {
	border: none;
	height: 600px; /* Replacing `h-[600px]` */
	width: 360px; /* Replacing `w-[360px]` */

	/* Medium devices: min-width 768px */
	@media (min-width: 768px) {
		height: 690px; /* Replacing `md:h-[690px]` */
	}

	/* Small devices: min-width 640px */
	@media (min-width: 640px) {
		width: 400px; /* Replacing `sm:w-[400px]` */
	}
}