/*
 * Screenshot bands: a column led by the screen that proves its claim, rather than an icon.
 * Same components the home page uses; the copies in home.css are the ones to delete when
 * that file is next touched, at which point the home page loads this sheet instead.
 */

.shot-cols {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	text-align: center;
}
.shot-col { display: flex; flex-direction: column; }
.shot-col h3 { font-size: var(--t-xl); font-weight: 700; margin-bottom: .625rem; }
.shot-col p { color: var(--site-muted); margin-bottom: 1rem; }
.shot-col .link-caps { margin-top: auto; align-self: center; }

.link-caps {
	display: inline-block;
	padding: .3125rem 0;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
}
.link-caps:hover { text-decoration: underline; text-underline-offset: .3em; }

/* The frame owns the aspect ratio, so the box is reserved before the shot arrives. */
.shot-col__shot {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #fff;
	border: 1px solid var(--site-line);
	box-shadow: var(--shadow-sm);
	border-radius: var(--r-md);
	margin-bottom: 1.5rem;
}
.shot-col__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/* A whole 1440px admin screen is unreadable at column width, so a column that depends on
   its detail zooms the part that carries the meaning instead of showing all of it. */
.shot-col.is-zoom-left .shot-col__shot img { transform: scale(1.4); transform-origin: left top; }
.shot-col.is-zoom .shot-col__shot img { transform: scale(1.9); transform-origin: center 28%; }
.shot-col.is-zoom-center .shot-col__shot img { transform: scale(1.9); transform-origin: center 44%; }