How can I make the text inside of a summary block overlay the thumbnail image?

Site URL: https://portfolio-test-site.squarespace.com/events

EDIT — So as it turns out, I've manage to solve this myself. Please see second comment for solution.

Hi there, 

I'm about to wrap up this client website, and have run into some final roadblocks. Would be grateful for some help, please.

I'm trying to change the 'Title' and 'Excerpt' position of the text in a summary block so that it overlaps the thumbnail like the below example. 

Website:https://portfolio-test-site.squarespace.com/events
Password: Hello123

I thought I'd leave the question up just in case someone needed a solution sometime in the future. A solution that worked for me was simply this: 

Change summary title styling

// * Change Title Font * //
.summary-title{
  font-family:"Poppins";
    font-weight: 500;
    font-size: 1.8vw!important;
  	padding-bottom: 6%;
    color:#000;
 }

Change width of each summary item 

//Change width of Thumbnails//
 .sqs-block-summary-v2 .summary-item.positioned {
    width: 33% !important;
    position: static;
}

.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

Overlap image thumbnail

.summary-v2-block.sqs-block-summary-v2 .summary-content {
    position: relative;
    bottom: 25%;
}

Finally, change the summary excerpt to be a button (make sure to add a link to your text in the summary item settings)

.summary-v2-block.sqs-block-summary-v2 .summary-content {
    position: relative;
    bottom: 25%;
}

Additional button styling (colour on hover)

Quote

.summary-excerpt {
  a:hover {
    background-color: hsl(60, 4%, 11%) !important;
  color: #fff;
    transition: .1s;
  }
}

If you wanted to apply this to specific pages you can open with #link-of-your-page { and close using }