Image Block Design - Collage Style - Bottom Overlap?

Hi,

I would like to have image blocks with the Collage style overlapping the bottom (example image attached), but the the image design only has options for left or right aligned boxes. I would also like the text within the collage box to be centred.

I have seen code on here for changing the background colour of the collage box backgrounds, but is it also possible to set the roundedness of the corners of the collage boxes - like we can now do with images?

Many Thanks, Jen

Demo

CSS code (make sure to edit your data-section-id)
You can use the Squarespace ID Finder Chrome Extension

//Image block collage vertical instead of image and text left/right
section[data-section-id="61d0db0d87d562059bf27d16"]{
  .sqs-block-image .design-layout-collage:not(.sqs-narrow-width){
    flex-direction:column;
align-items:center;
    .intrinsic{
      width:100%;
       > div {
        width:100% !important;
      }
    }

    .image-card-wrapper{
  margin-top: -6%;
justify-content: center;
}

  }  

.sqs-block-image .design-layout-collage .image-card > *{
   text-align:center !important;
}

//mobile fix 1
  .sqs-block-image .design-layout-collage.sqs-narrow-width .intrinsic{
    width:100% !important;
  }

//mobile fix 2
  .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper{
margin:auto !important;
    width:100% !important;
//mobile fix 3
    > div{
      width: 90% !important;
      margin:auto;
    }
  }



.sqs-block-image .design-layout-collage:not(.sqs-narrow-width).image-position-left .image-card{
  width: 90% !important;
}

}

The CSS could be cleaned up a lot, but this'll push you in the right direction 🙂

p.s.  I'm also available for freelancing.

Thank you!

If the code was helpful you can mark it as the "correct answer" so others will find it