@screen directives replacement

[billy-le]

I'm in the process of upgrading from v3 to v4 but I can't find any documentation of the @screen directive being replaced in my .css file.

Does anyone know what to use instead?

Here is an example of what I'm trying to replace:

.work_year {
  @screen lg {
    top: 30%;
  }

  @screen xl {
    top: 50%;  
  }
}

[wongjn]

You use @variant:

.work_year {
  @variant lg {
    top: 30%;
  }

  @variant xl {
    top: 50%;  
  }
}

[billy-le]

Thank you! That did the trick.