Text scale to fit container

Site URL: https://shop.jonathan-gallagher.com

I'd like some text to fill the entire width, from edge to edge of it's container without needing to input a specific font-size, as this container is responsive.

As you can see below, the text box is 20% of the width of the block it's in. the other 80% being a carousel with 4 images, so essentially creating 5 squares of equal size. I hope the 5th one can be filled with a couple of words of text.

The 80-20% ratio and number of carousel images, will modify with media-queries to suit different devices

#join-in .sqs-col-9 {
    width: 80%;
}

#join-in .sqs-col-3 {
    width: 20%;
}

#join-in .sqs-col-3 h1{
    max-width: 100%;
      min-width: 100%;

font css here?
}

Hi,

What is access password?