Basic grain-responsive-behavior demo
I am an responsive element. I do get an attribute for is-mobile, is-tablet, is-desktop when you resize the window.
I can use this information to change styles and/or attributes depending on it.
Here we have defined a different with for every state
--width: 600px;
--mobile-width: 100%;
--tablet-width: 100%;
We also have an Attribute marked that will only be visible on mobile due to the `mobile-marked="true"`.
The default media-queries for these elements are
mobile-query="(max-width: 425px)"
tablet-query="(min-width: 426px) and (max-width: 1024px)"
desktop-query="(min-width: 1025px)
Just modify them as needed.
For the full code of the tag "grain-responsive-behavior-example" please see
../grain-responsive-behavior-example.html