body {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; grid-template-rows: 100svh;
  align-items: center; justify-items: center;
}
figure { margin: 0; }
img {
  max-width: 80svw; max-height: 80svh; width: auto; height: auto;
  object-fit: scale-down; box-sizing: border-box; border: 4px solid #000;
  background: #000;
}
a.home {
  text-decoration: none; color: #000000; filter: grayscale(100%);
  transition: 5s;
}
a.home:hover { filter: grayscale(50%); transition: 0.5s; }
.insta { aspect-ratio: 9/16; }
.classic { aspect-ratio: 2/3; }
.instax { aspect-ratio: 3/4; }
.square { aspect-ratio: 1/1; }
.movietone { aspect-ratio: 19/16; }
.four-thirds { aspect-ratio: 4/3; }
.academy { aspect-ratio: 4/3; }
.leica { aspect-ratio: 3/2; }
.super16 { aspect-ratio: 5/3; }
.sixteen-nine { aspect-ratio: 16/9; }
.flat { aspect-ratio: 37/20; }
.univisium { aspect-ratio: 2/1; }
.cinemascope { aspect-ratio: 47/20; }
.cinerama { aspect-ratio: 70/27; }
.widelux { aspect-ratio: 3/1; }
.polyvision { aspect-ratio: 4/1; }
.circle-vision { aspect-ratio: 12/1; }

/* 夜 */
@media (prefers-color-scheme: dark) {
  body { background: #111111; }
  img { border-color: #eeeeee; background: #eeeeee; }
  a { color: #eeeeee; }
}

@view-transition { navigation: auto; }