CSS сетка не отображается в блоке в мобильной версии

Question

• 1000 ширина, однако я не могу этого сделать. Может ли кто-нибудь помочь мне, где я делаю неправильно

      <div class="serGrid">
        <div class="serFirstRow">
          <div class="leftSide">
            <img
              src="./images/image 1.png"
              width="450px"
              height="300px"
              alt=""
              class="bounce-1"
            />
          </div>
          <div class="rightSide">
            <h2 class="serHeading">Service Heading 1</h2>
            <p>
              Paragraaaph1
            </p>
          </div>
        </div>
        <div class="serSecRow">
          <div class="leftSide">
            <h2 class="serHeading">Service Heading 2</h2>
            <p>
              
              Paragraph2
            </p>
          </div>
          <div class="rightSide">
            <img
              src="./images/image-2.png"
              class="bounce-2"
              width="450px"
              height="300px"
              alt=""
            />
          </div>
        </div>
        <div class="serThirdRow">
          <div class="leftSide">
            <img
              src="./images/image-3.png"
              class="bounce-1"
              width="450px"
              height="300px"
              alt=""
            />
          </div>
          <div class="rightSide">
            <h2 class="serHeading">Service Heading 3</h2>
            <p>
              Paragraph 3
            </p>
          </div>
        </div>
      </div>
    

css для большого экрана

default font-size: 10px;

.serGrid {
  display: grid;
  grid-template-rows: repeat(3, 27rem);
  grid-row-gap: .2rem;
  justify-items: center; 
  position: relative;
}


.serFirstRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(min-content, 30rem));
  column-gap: 15rem;
  position: relative;
}

.serSecRow {
  display: grid;
  grid-template-columns: repeat(2, 50rem);
  column-gap: 15rem;
  position: relative;
}

.serThirdRow {
  display: grid;
  grid-template-columns: repeat(2, 50rem);
  column-gap: 15rem;
  position: relative;
}

.leftSide {
  justify-self: center;
}

.rightSide {
  justify-self: center;
}


.serHeading {
  padding: 8rem 2rem 2rem 0rem;
  font-size: 2.4rem;
  font-family: Playfair Display Bold;
}

#serHead {
  font-size: 3rem;
  font-family: Playfair Display Bold;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 5rem;
}

css для маленького экрана, который я пытался и потерпел неудачу

@media (max-width:600px) {
 .serGrid {
    display: grid;
    grid-template-rows: repeat(3, 50rem);
    grid-row-gap: .2rem;
    justify-items: center;
    position: relative;
  }

 .serFirstRow {
    display: grid;
    grid-template-rows: repeat(2, minmax(min-content, 10rem)); //went from columns to row so that it would show in block but it still shows 2 columns instead of row
    row-gap: 15rem;
    position: relative;
  }

  .serSecRow {
    display: grid;
    grid-template-rows: repeat(2, 10rem);
    row-gap: 15rem;
    position: relative;
  }

  .serThirdRow {
    display: grid;
    grid-template-rows: repeat(2, 10rem);
    row-gap: 15rem;
    position: relative;
  }

  .leftSide {
    justify-self: center;
  }

  .rightSide {
    justify-self: center;
  }

  .serHeading {
    padding: 8rem 2rem 2rem 0rem;
    font-size: 2rem;
    font-family: Playfair Display Bold;
  }

  #serHead {
    font-size: 2rem;
    font-family: Playfair Display Bold;
    text-align: center;

    padding-bottom: 5rem;
  }
}

сетка рабочего стола

mobile grid that I want

мобильный