Summary Block - Title Cuts Off

Site URL: https://www.brendawellness.com/home-2

Hi! I'm customizing summary blocks but I'm having one last problem. I have the following design, it is exactly what I wanted but the title gets cut at the top. Is there anything I could do so it is visible on top of the border?

This is my code

.summary-block-wrapper
{
  border: 3px solid #86d0cb;
}

.summary-item
{
  pointer-events : none;
}

.summary-thumbnail-outer-container {
    max-width: 50%;
    margin: 0 auto;
    margin-top: 35px!important;
}
.summary-thumbnail-outer-container img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}

.summary-content
{
 margin-top: 25px!important;
 margin-bottom: 50px!important;
  p{
     font-size: 18px!important;
  }
}

.summary-title {
  width: 20%;
  position: absolute;
  top: -12%;
  left: 40%;
  background: #86d0cb;
  border-radius: 8px;
  padding: 8px;
} 

Did you change layout? It looks fine to me

Yes, I had to change it as I couldn't find a way to fix it. In an ideal escenario, the light blue block with the title would be above the image. Right above the border.

On 9/8/2022 at 6:44 AM, 3ACOM said:

Yes, I had to change it as I couldn't find a way to fix it. In an ideal escenario, the light blue block with the title would be above the image. Right above the border.

Yes. Do you still need help?