Resizing text inside gatsby-background-image inside CSS-Grid resizes the whole image

Question

I have my background image with some text overlayed on it.

I am trying to make the text smaller but when I resize the text using CSS

.titleSize{
    font-size: 0.8em;
}

It ends up resizing the whole background image

---

Here is a minimum reproducible example on Github.

You'll have to install the node modules with yarn install or npm install and then run gatsby develop and view the web page at localhost:8000 in your browser

Note: if you change textClass='small' to textClass='big', do it for all 3 instance of textClass='small' to view the size change

---

Here is the code that I'm working with

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import BackgroundImage from 'gatsby-background-image'
import '../style.css'

const BgImage = ({className, imgProps, textClass}) => (
  <Link className={className} to='#'>
    <BackgroundImage
      Tag="section"
      role="img"
      className='bgImage'
      fluid={imgProps}
      backgroundColor={`#040e18`}
    >
      <div className='outer'>
        <h2 className={textClass}>How was the math test?</h2>
      </div>
    </BackgroundImage>
  </Link>
)

const IndexPage = () => {

  const data = useStaticQuery( graphql`
      query MyQuery {
        allImageSharp {
          edges {
            node {
              fluid {
                sizes
                src
                srcSet
                srcSetWebp
              }
            }
          }
        }
      }
    `)

    const imgProps = data.allImageSharp.edges[2].node.fluid

    return (
      <div className='container'>
        <div className='my-grid'>
          <BgImage className='un' textClass='small' imgProps={imgProps} />
          <BgImage className='du' textClass='small' imgProps={imgProps} />
          <BgImage className='twa' textClass='small' imgProps={imgProps} />
        </div>
        <div className='my-grid'>
          <BgImage className='un' textClass='big' imgProps={imgProps} />
          <BgImage className='du' textClass='big' imgProps={imgProps} />
          <BgImage className='twa' textClass='big' imgProps={imgProps} />
        </div>
      </div>
    )
}

export default IndexPage

.container{
    width: 100%;
    display: flex;
}

.beside{
    width: 50%;
}

.my-grid{
    height: 400px;
    display: grid;
    grid-gap: 10px;
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    grid-template-areas:
        "u u"
        "u u"
        "d t";            
    width: auto;
    padding: 20px;
}

.un{
    grid-area: u;
}

.du{
    grid-area: d;
}

.twa{
    grid-area: t;
}

.bgImage{
    width: 100%;
    height: 100%;
}

.small{
    margin-top: auto;
    font-size: 0.8em;
}

.big{
    margin-top: auto;
}

.outer{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

Answer 1

The width of your grid changes depending on the font size. Try adding width: 50% to your class .my-grid.