responsive page built with ViteJs, SASS, mobile first workflow

So, I think it was a good challenge but I need some advice about one thing (feel free to give more advices as you wish).

It's about the first text "Modern Art Gallery". In my project, this element is placed at this directory:

|_src
  |__assets
    |__views
        |__ home

what i did? I created an <h1> element for mobile and tablet class (title-desktop). This element disappear in desktop and another one is called. The new element called is the (pattern-desktop), which is place in another container. In this element I used this style props to make the effect of colors changing

.pattern-desktop{
      background: -webkit-linear-gradient( 0deg, #fff 58%, #151515 58%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

what advice i need What is the best way to do this part. I think I'm missing something important that I should've learned before this challenge.

I'm glad if someone could help me.

Thank you!