How to adjust picture width to make picture smaller on mobile

Site URL: https://matey.app

Hi, I'm trying to figure out how to make my iPhone pictures smaller on mobile so they aren't full-width. I want them to appear smaller like the Apple website example attached. I don't want to change the padding of the underlying text, just the iPhone. Does anyone know how to do this? My site is on Squarespace 7.1.

Thanks!

Add to Home > Design > Custom CSS

/* resize image on mobile */
@media screen and (max-width:767px) {
.homepage .image-inset {
    width: 70%;
    margin: 0 auto;
}
}

@tuanphan Looks good, is there a way to exclude adjusting the text underneath the phone screen? Also, is there a way to exclude adjusting the app icon photo?

New code

/* resize image on mobile */
@media screen and (max-width:767px) {
.homepage .image-inset {
    width: 70%;
    margin: 0 auto;
}
/* Exclude app icon */
div#block-yui_3_17_2_1_1595994896451_10296 .image-inset {
    width: 100% !important;
}
}

@tuanphan Thanks, looks good! Is there a way to exclude poster image blocks? Poster images are currently affected, causing the image to display incorrectly like the screenshot below. Do you also know how to apply the same border-radius of 30px to poster image blocks on mobile? It looks like the corner radius goes away on the phone.