Unable to locate CSS error ({ expected) in SCSS file-CodePudding

I'm super noob at coding and building a project for my SCSS/CSS Course so this might come up as a super easy even dumb question for most of you so here we go.

I'm getting this error in my CSS file but I'm unable to determine what to edit in my SCSS file to resolve it.

Here's my code for CSS from line 51 to 55 (where the error is displayed): enter image description here

 @media screen and (max-width: 768px) {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  :hover {
    color: pink;
   }
  }

And here's my SCSS code from where I think it might be coming from though I don't really know how to solve it: enter image description here

    @mixin mobile {
    @media screen and(max-width: $mobile){
      @content;  
     }
    }

My Github repository for the project can be found here: https://github.com/Romxh/RevisionOficial if more details need to be found.

CodePudding user response：

The issue is that you aren't targetting anything. See my example where I used a div as a target here :

  @media screen and (max-width: 768px) {

.div{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;}