/* =============================================================================
 * preview.css — styles the rich-media preview pane built by previewPane.js
 * (image/video/iframe content box + caption). Loads on /map/.
 * ============================================================================= */

.previewDiv {
	font-size: var(--text-sm);
	height: stretch;
	overflow-y: auto;
	padding: 1em;
	position: relative;
}

.contentBox {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding-block-start: 1em;
}

.caption {
	font: inherit;
	line-height: 1.5;
	padding-top: 0;
	text-align: left;
}

.undercaption {
	font-size: 12px;
	margin-top: 1vh;
	text-align: center;
	width: 100%;
}

.contentimg {
	cursor: pointer;
	margin-inline: auto;
	object-fit: contain;
}

.contentBox iframe {
	height: 55vh;
	min-height: 10vh;
	min-width: 10vw;
	overflow: clip;
	width: 100%;

	/* max-Height: 30vh; */
}

.videoBox {
	height: 240px !important;
	width: 320px !important;
}

.videoBox iframe {
	height: 480px;
	width: 640px;
}

.toolImg {
	width: 100%;
}

.toolImg img {
	height: 20vh;
	object-fit: contain;
	width: 20vw;
}

.previewStory {
	border: none;
	height: 100%;
	max-width: 100%;

	/* min-width: 25vw; */
	width: 100%;
}

/*
 .previewDiv img {
    min-width: 10vw;
    max-height: 70vh;
    width: 100%;
    height: 100%;
      object-fit: contain;
 }

 .previewDiv iframe {
    min-width: 10vw;
    width: 100%;
    max-height: 60vh;
    height: 55vh;
      object-fit: contain;
    overflow: hidden;
 }
*/

.previewStory iframe {
	height: 60vh;
	min-width: 10vw;
	width: 100%;

	/* object-fit: contain; */
}