Can't get grid-template-areas to change with media query

Hi so I’m working on my portfolio site, specifically the “About Me” section. I am having a super rough time trying to get these two grid items to rearrange according to the size of the screen (using @media query).

Here’s my code for that section (along with the query):

.welcome-section {
  justify-content: center;
  align-items: center;
  text-align: center;
  //color: #dad120;
  color: $header__color;
  padding: 100px 0;
  background-color: #43464B;

    display: grid;
    align-items: center;
    margin: 10px auto;
    padding: 10px;
    height: 100%;
    width: 90%;

    .item1 {
      grid-area: item1;
        margin: auto;
        height: 70%;
        width: 70%;
        border-radius: 50%;


    .item2 {
      grid-area: item2;

@media (min-width: 1200px) {
  .biography-grid {
      "item1 item2";


So on the bottom the media query is saying that for a screen that is 1200 pixels or bigger, the two grid items should be right next to each other. But when I refresh my page, I’m getting this:

(Here I am previewing what the page should look like when the screen is 1440px-wide; clearly the picture should be next to the text, not on top of it)

I know that I initialized grid-template-areas to put the picture on top of the text in the “About Me” section, but why is it doing this when I clearly specified how I wanted it in the media query?

The specificity for the .biography-grid selector in the media query is lower than the one nested inside .welcome-section

.welcome-section .biography-grid



You can either move the media query inside the same nested selector or add the .welcome-section class to it.

That did the trick! Thank you so much!