Gallery picture frame with a price ribbon

HTML

<section>
 <div class="gw-container">
  <div class="gw-frame">
   <span class="gw-price-ribbon"><i class="fa-solid fa-euro-sign"></i> 100.000.000</span>
   <div class="gw-frame-mat">
    <div class="gw-frame-image">
     <img src="painting.jpg" alt="">
    </div>
   </div>
  </div>
 </div>
<div class="gw-frame-text">
   <h1>Starry Night by Vincent van Gogh (1889)</h1>
   <p>It depicts a dreamy interpretation of the artist's asylum room's sweeping view of Saint-Rémy-de-Provence.</p>
 </div>
</section>

CSS

.gw-container {
margin: 0 auto;
max-width: 400px;
}
.gw-frame {
position: relative;
width: 100%;
padding-bottom: 82.5%;
background: url("frame-bg.png");
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 4px;
}
.gw-frame-mat {
position: absolute;
background: #FFFFFF;
top: 26px;
bottom: 26px;
left: 26px;
right: 26px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
border-radius: 4px;
}
.gw-frame-image {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
.gw-frame-image img {
width: 100%;
height: 100%;
border: solid 2px;
border-bottom-color: #FFFFEE;
border-left-color: #EEEEDD;
border-right-color: #EEEEDD;
border-top-color: #CCCCBB;
border-radius: 4px;
}
.gw-frame-image:after {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
box-shadow: inset -5px -5px 9px rgba(255, 255, 255, 0.45), inset 5px 5px 9px rgba(94, 104, 121, 0.3);
}
.gw-frame-text {
margin: 1em auto;
max-width: 290px;
background-color: rgba(255, 255, 255, 0.10);
border-top: 1px solid rgba(255, 255, 255, 0.20);
border-left: 1px solid rgba(255, 255, 255, 0.20);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
border-right: 1px solid rgba(255, 255, 255, 0.10);
padding: 10px;
border-radius: 4px;
}
.gw-frame-text h1 {
font-size: 12px;
margin: 0 0 10px 0;
padding: 0 0 2px 0;
border-bottom: 1px dotted rgba(230, 219, 192, 0.50);
}
.gw-frame-text p {
font-size: 11px;
margin: 0;
padding: 0;
}
.gw-price-ribbon {
--f: 10px;
--r: 15px;
--t: 10px;
position: absolute;
inset: var(--t) calc(-1*var(--f)) auto auto;
padding: 0 10px var(--f) calc(10px + var(--r));
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--f)), calc(100% - var(--f)) 100%, calc(100% - var(--f)) calc(100% - var(--f)), 0 calc(100% - var(--f)), var(--r) calc(50% - var(--f)/2));
background: rgba(130, 178, 116, 0.60);
color: #FFFFFF;
padding: 4px 30px 14px 40px;
box-shadow: 0 calc(-1*var(--f)) 0 inset rgba(100, 113, 93, 0.80);
top: 11px;
z-index: 1;
}