How do I edit the 'Add To Cart' button width and padding on mobile only?

I'm happy with how my products show up on Desktop view, but on mobile the spacing and size of product listing elements is all over the place! 

On my own phone, the Add To Cart button sits over two lines when there is clearly enough space to display it in a single horizontal line. There's also not enough space between the Add To Cart button and the product description. 

What I'd like mobile-only, shop-wide code to do:

• Set a minimum width for the Add To Cart button on mobile so it doesn't display across two lines.
• Increase the padding between the Add To Cart button and the product description. 
   

* * *

Bonus: The product images for the Brush Lettering Book (https://www.caseyschuurman.com/shop/p/brushletteringguidebook) are square 1:1, which crop to 3:2 on mobile. I've pieced together basic CSS to display the hero image as square and add a carousel below (still cropped). I'd appreciate any advice on how this code could be edited to target this product specifically to:

• Enlarge the hero image (the current code contains the object/image to the 3:2 height, making it appear very small on mobile.) 
• Display the product image carousel (below the hero) as squares too. They currently crop to the 3:2 ratio too. 

The current code I'm using is:

@media screen and (max-width:767px) { .ProductItem-gallery .ProductItem-gallery-scroll {
    display: grid;
    place-items: center;
   padding-top: 30px;
  }
}
.ProductItem-gallery-slides-item-image {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* Mobile Product Image */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;

Thank you in advance!

Thanks so much @tuanphan! This fixed the Add To Cart spacing. 

May I ask you about the product images? The are 1:1 square, but display cropped on mobile (screenshot attached). 

The code currently in place is: 

@media screen and (max-width:767px) { .ProductItem-gallery .ProductItem-gallery-scroll {
    display: grid;
    place-items: center;
   padding-top: 30px;
  }
}
.ProductItem-gallery-slides-item-image {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

  @media screen and (max-width:767px) {
.sqs-add-to-cart-button-inner {
    white-space: nowrap;
}
.sqs-add-to-cart-button-wrapper {
    margin-bottom: 30px !important;
  
}
}

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

@tuanphan Thanks again 🙂