Reduced product images on mobile stopped working. Help!

Site URL: https://www.bloombyb.nu

Hi!

Website: www.bloombyb.nu

I was able to reduce the images on the mobile version on the shop page but I am not sure what I did that it stopped working. 

Now they look big and showing one column only. I would like there to be 2 columns.

I would also like to optimize the images on the home page and reduce the size and have 2 columns.

Think it stopped working after I added the code to add slide arrows on the products. However, i deleted the code jus to doble check and nothing. 

Thank you very much!

I just launched the website today! Your feedback is also much appreciated.

This is all the code I have introduced so far. 

body:not(.homepage) .header-title-logo {
    filter: invert(1);
}


/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
  
}

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
    .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

Hi. It looks like you fixed this? I see the code works now

yes, somehow it worked now!