Updated image styling

index.html

@@ -15,7 +15,7 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=image-placement">
+    <link rel="stylesheet" href="styles.css?version=image-placement-border">
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
@@ -82,7 +82,7 @@
 
         <figure class="homepage-hero-image-figure" data-speed="0.5">
           <div
-            class="photography-placeholder photography-placeholder-tall"
+            class="photography-frame photography-frame-tall"
             role="img"
             aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
           >
@@ -102,7 +102,7 @@
           <div class="philosophy-content-grid">
             <figure class="philosophy-image-figure">
               <div
-                class="photography-placeholder photography-placeholder-portrait"
+                class="photography-frame photography-frame-portrait"
                 role="img"
                 aria-label="Cedar garland and velvet ribbon following a curved staircase"
               >
@@ -175,7 +175,7 @@
 
             <figure class="approach-image-figure">
               <div
-                class="photography-placeholder photography-placeholder-landscape"
+                class="photography-frame photography-frame-landscape"
                 role="img"
                 aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
               >
@@ -232,10 +232,10 @@
             </p>
           </div>
 
-          <div class="work-gallery-grid" aria-label="Imagined holiday settings, with image placeholders">
+          <div class="work-gallery-grid" aria-label="Imagined holiday settings">
             <figure class="work-gallery-primary-figure">
               <div
-                class="photography-placeholder photography-placeholder-wide"
+                class="photography-frame photography-frame-wide"
                 role="img"
                 aria-label="A tall evergreen tree lit with warm lights in a grand room"
               >
@@ -252,7 +252,7 @@
 
             <figure class="work-gallery-secondary-figure">
               <div
-                class="photography-placeholder photography-placeholder-portrait"
+                class="photography-frame photography-frame-portrait"
                 role="img"
                 aria-label="A holiday table set with greenery and candles for a small gathering"
               >
@@ -269,7 +269,7 @@
 
             <figure class="work-gallery-detail-figure">
               <div
-                class="photography-placeholder photography-placeholder-square"
+                class="photography-frame photography-frame-square"
                 role="img"
                 aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
               >
@@ -305,7 +305,7 @@
 
             <figure class="client-fit-image-figure">
               <div
-                class="photography-placeholder photography-placeholder-landscape"
+                class="photography-frame photography-frame-landscape"
                 role="img"
                 aria-label="An open doorway framed by cedar garland and warm lights"
               >

styles.css

@@ -3,7 +3,7 @@
   --color-noel-black: #0e0e0e;
   --color-weathered-paper: #f4ede3;
   --color-noel-red: #7a0f18;
-  --color-photography-placeholder: #ff2d95;
+  --color-photography-background: #ff2d95;
   --color-softened-black: #292724;
   --color-subtle-rule: rgba(14, 14, 14, 0.24);
   --font-family-editorial: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
@@ -304,50 +304,50 @@ ul {
   margin-top: clamp(7rem, 11vw, 11rem);
 }
 
-.photography-placeholder {
+.photography-frame {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 12rem;
   padding: clamp(1.5rem, 4vw, 3rem);
-  background: var(--color-photography-placeholder);
+  overflow: hidden;
+  background: var(--color-photography-background);
   color: var(--color-noel-black);
   text-align: center;
 }
 
-.photography-placeholder span {
+.photography-frame img {
-  max-width: 22rem;
+  position: absolute;
-  font-size: clamp(0.66rem, 1vw, 0.78rem);
+  inset: 0;
-  font-weight: 600;
+  display: block;
-  letter-spacing: 0.16em;
-  line-height: 1.6;
-  text-transform: uppercase;
-}
-
-.photography-placeholder img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: center;
+  border: #FFF;
+  border-width: 1rem;
+  border-style: solid;
 }
 
-.photography-placeholder-tall {
+.photography-frame-tall {
   aspect-ratio: 4 / 5;
 }
 
-.photography-placeholder-portrait {
+.photography-frame-portrait {
   aspect-ratio: 3 / 4;
 }
 
-.photography-placeholder-landscape {
+.photography-frame-landscape {
   aspect-ratio: 16 / 10;
 }
 
-.photography-placeholder-wide {
+.photography-frame-wide {
   aspect-ratio: 16 / 9;
 }
 
-.photography-placeholder-square {
+.photography-frame-square {
   aspect-ratio: 1;
 }