How can I optimize the 'New in' collection banner for different screen sizes?

I’d like the ‘New in’ banner to go across the entire page, with it being able to adapt to the screen size. I also want the description (‘new released’) to be directly underneath the ‘new in’ banner within the pink background.

This is what I’ve got so far:

.collection-hero__title {
text-align: center;
background-color: #ffc2d2;
padding: 35px;
margin-bottom: 0rem;
}

.collection-hero__description {

}

As seen here: https://www.pollygoneillustration.com/collections/new

Thank you

Please use this code instead of

.collection-hero { background-color: #ffc2d2; }
.collection-hero .collection-hero__title { padding: 5px; }
.collection-hero .collection-hero__description { max-width: 100%; text-align: center; }