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:
parent
0763c3b57a
commit
fa44274f29
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
|
|
@ -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 · 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 · Kinetic</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue