/*
	Link gallery — thumbnail tiles that open a live site in a new tab.

	Loaded AFTER main.css and contains ADDITIONS ONLY: every selector is scoped
	under .link-gallery, so nothing in the template can be affected. Reverts by
	deleting this file, its <link> tag, and the .link-gallery blocks in the
	markup.
*/

	.link-gallery {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 1rem;
		margin: 0 0 2rem 0;
	}

	/* Flex rather than grid, with a fixed basis: a CSS grid using `1fr` would
	   stretch a lone tile across the whole panel, and the Adventuring section
	   has only one. */
		.link-gallery > a {
			-moz-flex: 0 1 13rem;
			-webkit-flex: 0 1 13rem;
			-ms-flex: 0 1 13rem;
			flex: 0 1 13rem;
			max-width: 15rem;
			display: block;
			/* The template gives every <a> a dotted bottom border; kill it here or
			   each tile gets a stray line under it. */
			border-bottom: 0;
			border: solid 1px rgba(255, 255, 255, 0.3);
			border-radius: 4px;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.25);
			-moz-transition: border-color 0.2s ease, background-color 0.2s ease;
			-webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
			-ms-transition: border-color 0.2s ease, background-color 0.2s ease;
			transition: border-color 0.2s ease, background-color 0.2s ease;
		}

			.link-gallery > a:hover,
			.link-gallery > a:focus {
				border-color: #ffffff;
				background-color: rgba(255, 255, 255, 0.075);
			}

			.link-gallery > a img {
				display: block;
				width: 100%;
				height: auto;
				border-radius: 0;
			}

			.link-gallery > a .cap {
				display: block;
				padding: 0.6rem 0.75rem;
				font-size: 0.6rem;
				font-weight: 300;
				letter-spacing: 0.2rem;
				text-transform: uppercase;
				line-height: 1.4;
			}

			.link-gallery > a .cap small {
				display: block;
				font-size: 0.85em;
				letter-spacing: 0.1rem;
				text-transform: none;
				opacity: 0.6;
			}

	/* One tile per row on phones — two 13rem tiles side by side would each be
	   squeezed below a legible thumbnail size inside the article panel. */
	@media screen and (max-width: 480px) {

		.link-gallery > a {
			-moz-flex-basis: 100%;
			-webkit-flex-basis: 100%;
			-ms-flex-basis: 100%;
			flex-basis: 100%;
			max-width: none;
		}

	}

/* Inline video clip (Homestead). Constrained hard: the source is a 480x854
   portrait phone capture, and at native width it would dominate the article
   panel. */
	.clip {
		display: block;
		width: 100%;
		max-width: 16rem;
		height: auto;
		border: solid 1px rgba(255, 255, 255, 0.3);
		border-radius: 4px;
		margin: 0 0 2rem 0;
		background-color: #000000;
	}