/* Copyright (c) 2026 Eric Espeland. All rights reserved. */
/* The company site's few additions to site.css (which it shares with the full site). */

/* Home: the renders, two across on wider screens. */
.renders { display: grid; gap: var(--s-5); margin: var(--s-6) 0 var(--s-4); padding: 0; list-style: none; }
@media (min-width: 40rem) { .renders { grid-template-columns: repeat(2, 1fr); } }
.renders figure { margin: 0; }
/* The renders are made on white: kept on white in dark mode too. */
.renders img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); }
.renders figcaption { margin-top: var(--s-2); font-size: var(--t-row); }
.renders figcaption strong { display: block; color: var(--ink); }

/* Product: each part with its screenshot. */
.part { display: grid; gap: var(--s-5); align-items: start; padding-top: var(--s-8); margin-top: var(--s-8); border-top: 1px solid var(--line); }
@media (min-width: 56rem) { .part { grid-template-columns: 1fr 1.25fr; } }
.part h2 { margin-top: 0; }
.part ul { padding-left: 1.2em; }
.part li { margin-bottom: var(--s-2); }
.part .shots { display: grid; gap: var(--s-5); }
.shot img { width: 100%; height: auto; }

/* Short labelled facts (About). */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-6); }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 30rem) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: var(--s-2); } }

.foot-nav li a { display: inline-block; min-height: 24px; padding: 2px 0; }

/* Home: the four parts, four across on wide screens (site.css allows five). */
@media (min-width: 64rem) { .promises.four { grid-template-columns: repeat(4, 1fr); } }