return (
		<>
			<div
				className={`absolute overflow-hidden -translate-x-1/2 transition-all ${
					!onFlip ? 'visible' : 'hidden'
				}`}
				style={{
					zIndex: 1000,
					height: height,
					width: width,
					opacity: onFlip ? '0' : '1',
				}}>
				<img
					className="absolute h-full w-full object-fill pointer-events-none z-1000"
					src={`${topLayout}`}
					alt="top-front"
					style={{ height: height / 2, zIndex: 1000 }}
				/>

				<img
					className="absolute bottom-0 left-0 w-full object-fill pointer-events-none z-1000"
					src={bottomLayout}
					alt="bottom"
					style={{ height: height / 2, zIndex: 1000 }}
				/>
				<div className="rounded-b-[12%] rounded-t-[12%] overflow-hidden h-full w-full">
					{children}
				</div>
			</div>

			{onFlip && (
				<>
					<TopFrontLayout
						height={height}
						width={width}
						flipped={flipped}
						removeAnimation={removeAnimation}
						hide={hideTopLayout}>
						{children}
					</TopFrontLayout>

					<BottomFrontLayout
						height={height}
						width={width}
						hide={hideBottomLayout}>
						<div style={{ transform: `translateY(-${height / 2}px)` }}>
							{children}
						</div>
					</BottomFrontLayout>
				</>
			)}
		</>
	);