Collections: Reduce padding on top or bottom with collection pages

Collection pages default to 60px of padding on top and 120px padding at the bottom. If you want to tighten up your pages, you can use code to adjust the values:

/* -- code reduce collection page padding -- */
.template-collection .collection {
    padding-top: 30px;
    padding-bottom: 0px;
}

.template-collection h1.title.grid__item, .template-collection h1.title--flex {
	margin-bottom: 0px;
}
/* -- adjust for mobile -- */
@media all and (max-width: $small) {
.template-collection .collection {
    padding-top: 10px;
    padding-bottom: 0px;
}
.template-collection h1.title.grid__item, .template-collection h1.title--flex {
	margin-bottom: 10px;
    }
}
/* - 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