@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,400&display=swap');
.photo-frame{ position:relative;width:100%;aspect-ratio:4/5; border:1px solid rgba(255,255,255,.16); overflow:hidden; background:linear-gradient(200deg,#1c1a15,#0b0a08 70%); }
.photo-frame.square{ aspect-ratio:1/1; }
.photo-frame.ratio-190{ aspect-ratio:1/.90; }
.photo-frame img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.78); transition:transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s cubic-bezier(.16,1,.3,1); }
.photo-frame:hover img{ transform:scale(1.045); filter:grayscale(.0) contrast(1) brightness(1) sepia(.12); }
.photo-frame::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(13,12,10,.05) 0%, rgba(13,12,10,.55) 100%), linear-gradient(115deg, rgba(166,128,60,.14), transparent 55%); }
.photo-frame .frame-tag{ position:absolute;top:18px;left:18px;z-index:2; font-family:'Jost', sans-serif; font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:#C7A468;border:1px solid rgba(199,164,104,.4); padding:6px 10px;background:rgba(13,12,10,.5); }
.photo-frame .frame-caption{ position:absolute;left:18px;right:18px;bottom:18px;z-index:2; font-family:'Jost', sans-serif; font-style:normal;font-weight:400; font-size:14px;line-height:1.5;color:rgba(255,255,255,.7); }
.photo-frame .frame-corner{ position:absolute;width:16px;height:16px;border:1px solid #C7A468;opacity:.7;z-index:2; }
.photo-frame .frame-corner.tl{top:10px;left:10px;border-right:none;border-bottom:none;}
.photo-frame .frame-corner.br{bottom:10px;right:10px;border-left:none;border-top:none;}
.photo-frame.no-caption img{filter:grayscale(.85) contrast(1.06) brightness(.9);}
.photo-frame.no-caption:hover img{filter:grayscale(.25) contrast(1.08) brightness(1) sepia(.08);}
@media (max-width: 1024px){ .photo-frame .frame-tag{ font-size:9px; padding:5px 9px; top:14px; left:14px; } .photo-frame .frame-caption{ font-size:13px; left:14px; right:14px; bottom:14px; } .photo-frame .frame-corner{ width:14px; height:14px; } }
@media (max-width: 600px){ .photo-frame:not(.square):not(.ratio-190){ aspect-ratio:4/5; } .photo-frame .frame-tag{ font-size:8.5px; letter-spacing:.14em; padding:5px 8px; top:12px; left:12px; } .photo-frame .frame-caption{ font-size:12.5px; line-height:1.4; left:12px; right:12px; bottom:12px; } .photo-frame .frame-corner{ width:12px; height:12px; } .photo-frame .frame-corner.tl{ top:8px; left:8px; } .photo-frame .frame-corner.br{ bottom:8px; right:8px; } }