CSS circular image with border and shadow

HTML

<div class="demo-preview">
 <div class="demo-outer">

   <div class="demo-inner"></div>
   <div class="demo-caption">A lion is called a 'king' obviously for a reason</div>
  
 </div>
</div>

CSS

.demo-outer {
position: relative;
height: 340px;
background-image: url("image-02.jpg");
background-repeat: no-repeat;
background-position: center left;
background-size: cover;
border: 6px solid #FBFBFB;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.demo-inner {
position: absolute;
top: -64px;
left: 60px;
background-image: url("image-01.jpg"); 
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 120px;
width: 120px;
border: 6px solid #FBFBFB;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.demo-caption {
position: absolute;
bottom: 0;
width: 100%;
margin-top: 3.4rem;
background-color: rgba(234, 220, 194, 0.80);
color: rgba(255, 255, 255, 0.90);
font-size: 1.2rem;
padding: 6px 20px;
text-align: center;
text-transform: uppercase;
}