<section>
 <div class="demo-container">
  <div class="demo-frame">
   <span class="demo-price-ribbon"><i class="fa-solid fa-euro-sign"></i> 100.000.000</span>
   <div class="demo-frame-mat">
    <div class="demo-frame-image">
     <img src="painting.jpg" alt="">
    </div>
   </div>
  </div>
 </div>
</section>

.demo-container {
  margin: 0 auto;
  max-width: 400px;
}

.demo-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;
}

.demo-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;
}

.demo-frame-image {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
}

.demo-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;
  }

.demo-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);
}

.demo-price-ribbon {
  position: absolute;
  inset: 10px calc(-1*10px) auto auto;
  padding: 0 10px 10px calc(10px + 15px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
  calc(100% - 10px) calc(100% - 10px), 0 calc(100% - 10px),
  15px calc(50% - 10px/2));
  background: rgba(130, 178, 116, 0.60);
  color: #FFFFFF;
  box-shadow: 0 calc(-1*10px) 0 inset rgba(100, 113, 93, 0.80);
  top: 11px;
  z-index: 1;
}