Positioning image relative to text so responsive scales proportionally

Question

I have a 3 column grid and want the left image (blue rays) to always stay next to the text when I scale everything. However, when I scale, the grid stretches (which is fine for the other columns), but I want the image to always stay next to the text and not drift away. Please advise.

What I want my design to look like:

Text with rays coming out of top left This is my code

 #index-about-top {
            @include md {
                display: grid;
                grid-template-columns: 10% 340px auto;
                padding-left: 15px;
            }

            article {
                @include md {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    z-index: 1;
                    padding-bottom: 40px;
                }
            }

            #blue-mug {
                @include md {
                    margin-left: -150px;
                }
            }

            #ray-scribble {
                @include md {
                    top: 60px;
                }
            }
        }

<div id="index-about-top">
            <img src="img/Index/about-ray-scribble.svg" id="ray-scribble">
            
            <article>
                <h2>About Us</h2>
                <p>Glaze Studio inspires curiosity and discovery around the art and craft of clay, drawing together
                students, artists, and an engaged public into a welcoming community. </p>
            </article>
            
            <img src="img/Index/bluemug.png" id="blue-mug" class="show-for-md">
        </div>

Answer 1

An alternative option would be to use a ::before pseudo-element with a background image.

But keeping your structure, if you use a fixed size (like 50px) instead of relative (10%) for the first column, it won't move relative to the second column. See the snippet below.

Note: I had to remove your Sass mixins to get it working.

#index-about-top {
  display: grid;
  grid-template-columns: 50px 340px auto;
  padding-left: 15px;
}

article {
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
  padding-bottom: 40px;
}

#blue-mug {
  margin-left: -150px;
}

#ray-scribble {
  top: 60px;
}

<div id="index-about-top">
            <img src="img/Index/about-ray-scribble.svg" id="ray-scribble">
            
            <article>
                <h2>About Us</h2>
                <p>Glaze Studio inspires curiosity and discovery around the art and craft of clay, drawing together
                students, artists, and an engaged public into a welcoming community. </p>
            </article>
            
            <img src="img/Index/bluemug.png" id="blue-mug" class="show-for-md">
        </div>