Collections: Show a clean grid of product images without titles or prices on mobile only

Example:

Code to use:

/* -- code to show clean grid on collection pages for mobile-- */
@include at-query($max, $small) {

.template-collection .figcaption {display:none}

.template-collection .grid__item {
        padding-left:5px;
        padding-right: 0px
    }

.template-collection .grid,.template-collection .grid--rev,.template-collection .grid--full,.template-collection .grid--rev,.template-collection .grid--full,.template-collection .grid-uniform {
        margin-left: -5px;
        margin-right: 0px
    }

.template-collection .product-grid-item {
        margin-bottom: 5px
    }
} 
/* - end - */

To include this effect with Related Products and other product grid areas, use this code instead:

/* -- code to show clean grid on all pages for mobile-- */
@include at-query($max, $small) {
  
  .figcaption {display:none}

  .grid__item {
    padding-left:5px;
    padding-right: 0px
  }

  .grid,.grid--rev,.grid--full,.grid--rev,.grid--full,.grid-uniform {
    margin-left: -5px;
    margin-right: 0px
  }

  .product-grid-item {
    margin-bottom: 5px
  }
  
}  
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code