The photo gallery gives the first image two columns because one landscape sets the scene

The PhotoGallery component is fifty lines. It takes a photos array, an accentColor string, and an optional baseDelay for staggered entrance animations. The grid is two columns. The first image spans both using a single index check — const isWide = i === 0. That image renders at 800 by 450 pixels. Every subsequent image renders at 400 by 400. The wide image is the establishing shot. The squares are the details. No prop controls this. The array order controls it. Put the strongest image first and the layout does the rest. Every image has a gradient overlay built from the service accent colour. The background value is a template literal — linear-gradient to top, accentColor plus 15 at zero percent, transparent at fifty percent. The 15 is a hex opacity suffix. It means roughly eight percent opacity at the bottom edge, fading to nothing halfway up. The overlay tints the lower portion of each image with the service accent — fuchsia on the audio page, emerald on the production page, purple on software — without obscuring the photograph. The effect is subtle enough that most visitors will not consciously notice it, but it ties the images into the page colour scheme. On hover, the image scales to 105 percent over 500 milliseconds using group-hover and transition-transform. The overflow is hidden on the container so the zoom crops rather than overflows. The object-position is set to center 30 percent so faces and focal points sit above centre rather than dead centre, which is where most subject matter sits in performance and studio photography. Each image wraps in a BlurReveal with a delay calculated from the baseDelay plus the index times 100 milliseconds. The first image appears, then each square follows in sequence. One component, one index check, one gradient formula, and every service page gets a photo section that matches its colour without the gallery knowing which service it belongs to.