/*
 * The real screenshots. Game cards cross-fade through theirs (components/shots.js); the
 * websites' screens show a screenshot of the live site.
 */
[data-shots] img:not(:first-of-type) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
[data-shots] img:not(.is-on) { opacity: 0; }
.no-js [data-shots] img:first-of-type { opacity: 1; }
.shots__dots { position: absolute; right: 0.5rem; bottom: 0.4rem; z-index: 3; display: flex; }
.shots__dots button { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.shots__dots button::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid rgb(243 239 226 / 0.75); background: rgb(2 3 10 / 0.4); transition: background-color 0.25s ease, transform 0.25s ease; }
.shots__dots button:hover::before { transform: scale(1.25); }
.shots__dots button[aria-pressed="true"]::before { background: var(--gold); border-color: var(--gold); }
.js .tx:not(.is-received) .shots__dots { opacity: 0; }
.shots__dots { transition: opacity 0.6s ease; }

/* a website's screen: its real front page, whole (the screen takes the screenshot's shape) */
.screen:has(.screen__shot) { aspect-ratio: auto; }
.screen:has(.screen__shot) .screen__view { aspect-ratio: 2 / 1; }
.screen__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }