Faça eu como fiz: seção de destaque responsiva.

Banner.

    .banner__conteudo {
  display: flex;
  justify-content: space-between;
  padding: 5.5rem 0;

  @media (max-width: 768px) {
    & > .banner__imagem {
      display: none;
    }
  }
}
.banner__texto-principal {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  align-items: self-start;

  @media (max-width: 768px) {
    align-items: center;
    text-align: center;
    padding: 0 5.5rem;
  }
}
    

Html.

 <section class="quem-somos container">
        <div>
          <img
            src="./assets/imagens/quem-somos-desktop.png"
             srcset="
    ./assets/imagens/quem-somos-mobile.png  299w,
    ./assets/imagens/quem-somos-desktop.png 530w
  "
  sizes="(max-width: 360px) 299px, (max-width: 768px) 299px, 530px"
  alt="Imagem de estudante sorrindo"
/>

Quem somos.

 .quem-somos {
  display: flex;
  justify-content: space-between;
  padding: 7rem 0;

  @media (max-width: 768px){
  flex-direction: row-reverse; 
    padding: var(--padding-xl) 0;
  }
}