Center Prism in hero video, add Prism to installations grid

Cropped video to center the light sculpture. Added Prism still
to installations section in a 3-column grid layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-19 14:44:37 -07:00
parent 0763c3b57a
commit fa44274f29
3 changed files with 15 additions and 4 deletions

Binary file not shown.

BIN
public/img/prism-still.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

View File

@ -115,6 +115,7 @@
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
object-position: center center;
z-index: 0;
}
@ -301,7 +302,7 @@
.installations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@ -310,14 +311,16 @@
overflow: hidden;
}
.installation-item img {
.installation-item img,
.installation-item video {
width: 100%;
height: 350px;
object-fit: cover;
transition: transform 0.5s ease;
}
.installation-item:hover img {
.installation-item:hover img,
.installation-item:hover video {
transform: scale(1.03);
}
@ -677,7 +680,8 @@
grid-template-columns: 1fr;
}
.installation-item img {
.installation-item img,
.installation-item video {
height: 280px;
}
@ -815,6 +819,13 @@
<p>Accra &middot; UV-Reactive Environment</p>
</div>
</div>
<div class="installation-item">
<img src="img/prism-still.jpg" alt="Prism — light sculpture installation" loading="lazy">
<div class="installation-caption">
<h4>Prism</h4>
<p>Light Sculpture &middot; Kinetic</p>
</div>
</div>
</div>
</div>
</section>