Why is my getting cut off when resizing window?

Just looking for some help with this. I have a padding on all my sections so that they never touch the edge of the window when resizing. However, the padding doesn’t work on my intro section where I’ve used CSS grid and made one of my grid-template-columns have a value of max-content. How can I fix this? Here’s my code along with a link to it on codepen. Thanks in advance for your help!

HTML

<section class="intro" id="home">
    <h1 class="section__title section__title--intro">
        Hi, I am <strong>Christine Banlawi</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">web developer</p>
    <img src="images/cb-01.jpg" alt="" class="intro__img">
</section>

CSS

.intro {
    position: relative;
}

.intro__img {
    box-shadow: var(--bs);
}

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas: 
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }
    
    .intro__img {
        grid-area: img;
        min-width: 300px;
        position: relative;
        z-index: 2;
    }    
    
    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 3em);
    }
}

https://codepen.io/cbanlawi/pen/oNzNEOy