/*<meta />*/

h2.center
{
	text-align: center;
}

@media screen
{
	.video-layout	/* master page */
	{
		margin: 2rem 13rem;
	}

	.flare-page	/* not used */
	{
		padding-top: 1rem;
		padding-bottom: 2rem;
	}

	.flare-header,
	.flare-footer	/* not used */
	{
		margin-bottom: 1rem;
	}

	.flare-footer__text	/* not used */
	{
		margin: 2rem 0 0;
		font-size: 0.875rem;
		/* muted gray */
	}

	/* --- Video grid / cards --- */

	.video-grid	/* not used */
	{
		/* Foundation handles layout/gutters; this is just extra spacing if desired */
	}

	.grid-container	/* not used */
	{
		/* Typical centered container behavior */
		max-width: 75rem;
		margin-left: auto;
		margin-right: auto;
		/* Safe padding so content doesn't touch edges */
		padding-left: 1rem;
		padding-right: 1rem;
		/* Helps prevent horizontal scroll if margin-gutters push outward */
		overflow-x: hidden;
	}

	.video-card__media	/* snippet */
	{
		background: #111827;
		/* dark frame behind videos */
	}

	/* Ensure video fills the responsive-embed area cleanly */

	.video-card__media video,
	.video-card__media iframe
	{
		width: 100%;
		height: 100%;
		display: block;
	}

	/* If you want the video to crop instead of letterbox (optional):

    .video-card__media video
    {
        object-fit: cover;
    }

    */

	.video-card__title	/* snippet */
	{
		/* font-size: 1.05rem; */
		font-size: 1.6rem;
		margin: 0;
		line-height: 1.25;
	}

	.video-card__desc	/* snippet */
	{
		margin: 0.5rem 0 0;
		font-size: 0.95rem;
		flex-grow: 1;
	}

	.video-card__meta	/* snippet */
	{
		margin: 0.75rem 0 0;
		line-height: 1.2rem;
		/* Moved Grid items to screen media query*/
		font-size: 0.875rem;
	}

	.meta__version,
	.meta__link	/* snippet */
	{
		display: none;
	}

	.meta__product,
	.meta__video-type,
	.meta__duration,
	.meta__date,
	.meta__category	/* snippet */
	{
		
	}

	.video-card__meta dt	/* snippet */
	{
		font-weight: 600;
	}

	.video-card__meta dd	/* snippet */
	{
		margin: 0;
	}

	/* Nice hover (optional) */

	.video-card:hover	/* snippet */
	{
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
		transform: translateY(-1px);
		transition: box-shadow 120ms ease, transform 120ms ease;
	}

	.video-card	/* snippet - used on article that wraps all video content Make cards equal height within each row */
	{
		height: 100%;
		background: #ffffff;
		border: 1px solid #e5e7eb;
		border-radius: 0.5rem;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	}

	.video-card__body	/* snippet */
	{
		display: flex;
		flex-direction: column;
		/* gap: 0.5rem; */
		padding: 1rem;
		height: 100%;
	}

	.video-card__meta	/* snippet */
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem 1rem;
		margin: 0.75rem 0 0;
		line-height: 1.2rem;
		font-size: 0.875rem;
	}

	.featured-video	/* featured video snippet */
	{
		text-align: center;
		display: grid;
		grid-template-columns: 1fr 2fr;
		grid-template-areas: "video description";
		gap: 0.5rem 2rem;
		margin: 1rem 2rem;
	}

	.featured-video div.video	/* featured video snippet */
	{
		grid-area: video;
	}

	.featured-video div.description	/* featured video snippet */
	{
		grid-area: description;
		align-self: center;
	}

	.featured-video div.metadata	/* featured video snippet */
	{
		grid-area: metadata;
	}

	/* --- XY Grid core --- */

	.grid-x	/* topic */
	{
		display: flex;
		flex-flow: row wrap;
		box-sizing: border-box;
	}

	.grid-x.large-up-3 > .cell	/* topic -  3 column */
	{
		width: 33.3333%;
	}

	.cell	/* snippet - Cells are flex items - used on div that is wrapped around all content in the snippet */
	{
		/* prevents long content from forcing overflow */
		flex: 0 0 auto;
		box-sizing: border-box;
		min-width: 0;
	}

	/* --- Responsive Embed (video/iframe wrapper) --- */

	.responsive-embed	/* snippet - used on div to wrap video object */
	{
		position: relative;
		height: 0;
		overflow: hidden;
		/* Default ratio (4:3) */
		padding-bottom: 75%;
	}

	.responsive-embed.widescreen	/* snippet - 16:9 widescreen ratio - used on div to wrap video object */
	{
		padding-bottom: 56.25%;
	}

	.responsive-embed > *	/* snippet  - Make any direct child fill the responsive frame (video, iframe, etc.) -used on div to wrap video object */
	{
		position: absolute;
		top: -1px;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
		display: block;
	}

	.grid-x.grid-margin-x	/* topic */
	{
		margin-left: -0.625rem;
		margin-right: -0.625rem;
	}

	.grid-x.grid-margin-x > .cell	/* topic */
	{
		padding-left: 0.625rem;
		padding-right: 0.625rem;
	}

	.grid-x.grid-margin-y > .cell	/* topic - Vertical gutters between rows */
	{
		margin-bottom: 1.25rem;
	}
}

@media only screen and (max-width: 1279px)
{
	.grid-x.medium-up-2 > .cell	/* topic -  2 column */
	{
		width: 50%;
	}

	.video-layout
	{
		margin: 0 6rem;
	}

	.video-card__meta
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem 2rem;
	}

	.featured-video
	{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: "video" "description";
		/* gap: 0.5rem 2rem; */
		margin: 1rem 2rem;
	}

	.featured-video video,
	div.featured-video iframe.vimeo-player_0	/* snippet */
	{
		width: 100%;
		display: block;
	}

	.description	/* snippet */
	{
		padding: 1rem 1rem 0;
	}
}

@media only screen and (max-width: 767px)
{
	.video-layout
	{
		margin: 0 1rem;
	}

	.video-card__meta
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem 2rem;
	}

	.grid-x.small-up-1 > .cell	/* topic - 1 column */
	{
		width: 100%;
	}
}