/* A consistent gallery presentation for the nine photography service pages.
   Keep the page-specific links and viewers; this sheet only changes the tiles. */
body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  gap: 12px;
}

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) > :is(a, button) {
  box-sizing: border-box;
  position: relative;
  display: block;
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  cursor: zoom-in;
}

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) > :is(a, button) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .35s ease;
}

/* These source photographs are portrait images. Let each occupy three rows
   instead of cropping the subject into a landscape thumbnail. */
body.a360-designed-page.a360-landing .a360-homepage .a360-res-gallery-grid > .a360-res-gallery-item:nth-child(2),
body.a360-designed-page.a360-landing .a360-homepage .mf-grid > .mf-photo:nth-child(2),
body.a360-designed-page.a360-landing .a360-homepage .ml-grid > .ml-photo--portrait,
body.a360-designed-page.a360-landing .a360-homepage .rl-gallery > .rl-photo--tall {
  grid-row: span 3;
  height: 100%;
  aspect-ratio: 2 / 3;
}

body.a360-designed-page.a360-landing .a360-homepage .a360-res-gallery-grid > .a360-res-gallery-item:nth-child(2) img { object-position: 50% 45%; }
body.a360-designed-page.a360-landing .a360-homepage .mf-grid > .mf-photo:nth-child(2) img { object-position: 50% 52%; }
body.a360-designed-page.a360-landing .a360-homepage .ml-grid > .ml-photo--portrait img { object-position: 45% 46%; }

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-expand,
  .a360-aerial-photo-expand,
  .tw-photo-expand,
  .co-photo-expand,
  .ar-photo-expand,
  .mf-photo-expand,
  .ml-photo-expand,
  .ht-photo-expand,
  .rl-photo-expand
) {
  position: absolute;
  inset: auto 10px 10px auto;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #ffffffa8;
  border-radius: 2px;
  color: #fff;
  background: #061827bd;
  opacity: 0;
  transform: none;
  pointer-events: none;
  transition: opacity .2s ease, background .2s ease;
}

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-expand,
  .a360-aerial-photo-expand,
  .tw-photo-expand,
  .co-photo-expand,
  .ar-photo-expand,
  .mf-photo-expand,
  .ml-photo-expand,
  .ht-photo-expand,
  .rl-photo-expand
) svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) > :is(a, button):is(:hover, :focus-visible) img { transform: scale(1.025); }

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) > :is(a, button):is(:hover, :focus-visible) :is(
  .a360-res-gallery-expand,
  .a360-aerial-photo-expand,
  .tw-photo-expand,
  .co-photo-expand,
  .ar-photo-expand,
  .mf-photo-expand,
  .ml-photo-expand,
  .ht-photo-expand,
  .rl-photo-expand
) { opacity: 1; background: #061827e6; transform: none; }

body.a360-designed-page.a360-landing .a360-homepage :is(
  .a360-res-gallery-grid,
  .a360-aerial-photo-grid,
  .tw-grid,
  .co-grid,
  .ar-grid,
  .mf-grid,
  .ml-grid,
  .ht-grid,
  .rl-gallery
) > :is(a, button):focus-visible { outline: 3px solid #d8bb83; outline-offset: -3px; }

@media (max-width: 980px) {
  body.a360-designed-page.a360-landing .a360-homepage :is(
    .a360-res-gallery-grid, .a360-aerial-photo-grid, .tw-grid,
    .co-grid, .ar-grid, .mf-grid, .ml-grid, .ht-grid, .rl-gallery
  ) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body.a360-designed-page.a360-landing .a360-homepage :is(
    .a360-res-gallery-grid, .a360-aerial-photo-grid, .tw-grid,
    .co-grid, .ar-grid, .mf-grid, .ml-grid, .ht-grid, .rl-gallery
  ) { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  body.a360-designed-page.a360-landing .a360-homepage :is(
    .a360-res-gallery-grid, .a360-aerial-photo-grid, .tw-grid,
    .co-grid, .ar-grid, .mf-grid, .ml-grid, .ht-grid, .rl-gallery
  ) > :is(a, button) { grid-column: auto; grid-row: auto; }

  body.a360-designed-page.a360-landing .a360-homepage .a360-res-gallery-grid > .a360-res-gallery-item:nth-child(2),
  body.a360-designed-page.a360-landing .a360-homepage .mf-grid > .mf-photo:nth-child(2),
  body.a360-designed-page.a360-landing .a360-homepage .ml-grid > .ml-photo--portrait,
  body.a360-designed-page.a360-landing .a360-homepage .rl-gallery > .rl-photo--tall {
    grid-row: auto;
    height: auto;
    aspect-ratio: 2 / 3;
  }

  body.a360-designed-page.a360-landing .a360-homepage .rl-gallery > .rl-photo--tall { aspect-ratio: 1123 / 2000; }
}

@media (min-width: 2200px) {
  /* The page styles otherwise expand these work sections to different widths. */
  body.a360-designed-page.a360-landing .a360-homepage .a360-res-work.a360-shell,
  body.a360-designed-page.a360-landing .a360-homepage :is(
    .a360-aerial-work, .tw-work, .co-work, .ar-work, .mf-work,
    .ml-work, .ht-work, .rl-work
  ) > .a360-shell {
    max-width: min(80vw, 2440px);
    padding-inline: clamp(72px, 3.4vw, 112px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.a360-designed-page.a360-landing .a360-homepage :is(
    .a360-res-gallery-grid, .a360-aerial-photo-grid, .tw-grid,
    .co-grid, .ar-grid, .mf-grid, .ml-grid, .ht-grid, .rl-gallery
  ) img { transition: none; }
}