Why is my product size constrained on desktop AND in mobile? I coded them differently.

Here are two images.

I want to constrain my product images by 65 percent on desktop, and have them extend across the screen on mobile. But they are 65 percent on both desktop AND mobile, which I do not have in my code. See below an excerpt of my code with the problem area in bold, and then below that, screenshots of the problem. Please help! 

 /* Product gallery styles */
    .product-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: -50px; /* Adjust the margin as needed */
    }
  /* Style for product images */
.product-container img {
  max-width: 100%; /* Limit the maximum width of each product */
  height: -50px; /* Maintain the aspect ratio of the image */
}
  /* Style for individual product */
    .product {
      position: relative;
      z-index: 2;
      max-width: calc(65% - 1px); /* Limit the maximum width of each product */
      margin: 0 auto; /* Center horizontally by setting auto margins */
      margin-top: 30px;
    }

    /* Target product title headings */
    .product-title {
      font-size: 22px; /* Adjust the font size */
      line-height: 1.2; /* Adjust the line height */

    }
    @media (max-width: 768px) {
      /* Adjust the font size for mobile */
      .product-title {
        font-size: 20px; /* Adjust the font size for mobile screens */
        max-width: 100%; /* Allow product listings to occupy full width on mobile */
    }
      .product {
    position: relative;
    margin-top: -10px; /* Adjust the negative margin to move the product listings up */
    padding-left: 0px; /* You can adjust this as needed */
        padding-right: 0px;
          width: 100%; /* Set the width to 100% to occupy the entire page width */
  }
      .logo {
        width: 200px; /* Adjust the width as needed */
        height: auto; /* Automatically adjust the height to maintain aspect ratio */
        top: 40px; /* Adjust the top position to move the logo down */
        padding-bottom: 0px;
      }
       .footer {
      position: relative;
      z-index: 5; /* Ensure that the footer has a higher z-index value than your products */
      /* Other styling properties for your footer */
    }
    }
  </style>

1. Here is my current desktop, which is constrained to 65 percent of it's size, which I like:

And here is the mobile, which squishes the image with a margin. I don't like this big margin, I want it to run all the way across the page.  

Hi,

Can you share link to this product? We can check easier