@@ -305,7 +305,7 @@
diff --git a/styles.css b/styles.css
index fb0a7b9..4e2280a 100644
--- a/styles.css
+++ b/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 {
- max-width: 22rem;
- font-size: clamp(0.66rem, 1vw, 0.78rem);
- font-weight: 600;
- letter-spacing: 0.16em;
- line-height: 1.6;
- text-transform: uppercase;
-}
-
-.photography-placeholder img {
+.photography-frame img {
+ position: absolute;
+ inset: 0;
+ display: block;
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;
}