Apply styles of different css classes based on media query for a class

I created a css file where I have styles for texts specifically. Example

.h1_24 {
   font-weight: 700;
   font-size: 24px;
   line-height: 140%;
}

.h5_18 {
   font-weight: 500;
   font-size: 18px;
   line-height: 120%;
}

...

Let’s say I have a class for a profile card:

.profile {
  ...
}

How would some use styles of .h1_24 in profile for desktops but then switch to .h5_18 on mobile?

@import "text-styles.css"

.profile {
  // use here styles of .h1_48
}

@media only screen and (max-width: 768px) {
  .profile {
    // use now styles of .h5_18
  }
}

Is it something that scss can do using @include or @mixin?

You need to sign in to view this answers

Related Post