resizing summary block for mobile?

Site URL: https://www.elisasunga.com/home-v2

QUESTION 1

I am working on elisasunga.com/home-v2. On desktop, it is looking great but now that I am looking at it for mobile, I need help resizing the summary blocks I am using to display product and blog content. Is there a custom code that will help me resize the summary block view on mobile so that maybe it displays 2 columns on mobile?

QUESTION 2

For the summary block on top with the 4 images, is it possible to left-align the title and meta data text? (i.e. corn cream bee sting cake, banana milk chiffon, etc)

Thank you so much for any help!

Use the code to Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1725312937284_4451 {
.summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px;
}
.summary-item {
    width: 100% !important;
    margin: unset !important;
    padding: unset !important;
}
img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
    position: static !important;
}
.img-wrapper {
    padding: unset !important;
}
}}