How do I hide an element according to screen size using tpl

Question

Hello, good afternoon, sir! I wanted to know how to hide or not execute elements according to screen size or through device detection using . tpl

I tried using the following code:

<div class="swiper-wrapper">
                {% if width > 350px %}
                    {% for slide in settings.slider %}
                        <div class="swiper-slide slide-container">
                            {% if slide.link %}
                                <a href="{{ slide.link }}" aria-label="{{ 'Carrusel' | translate }} {{ loop.index }}" title="{{ slide.title }}">
                            {% endif %} 
                            {% set has_text =  slide.title or slide.description or slide.button %}
                            <div class="slider-slide">

                                <img {% if loop.first %}src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image"{% else %}src="{{ slide.image | static_url | settings_image_url('tiny') }}" data-src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image swiper-lazy blur-up-huge"{% endif %} alt="{{ slide.description }}">
                            </div>
                            {% if slide.link %}
                                </a>
                            {% endif %}
                    {% endfor %}
                        </div>
                {% else %}
                    {% for slide in settings.slider_mobile %}
                        <div class="swiper-slide slide-container">
                            {% if slide.link %}
                                <a href="{{ slide.link }}" aria-label="Banner Rotativo Mobile {{ loop.index }}" title="{{ slide.title }}">
                            {% endif %} 
                            {% set has_text =  slide.title or slide.description or slide.button %}
                            <div class="slider-slide">

                                <img {% if loop.first %}src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image"{% else %}src="{{ slide.image | static_url | settings_image_url('tiny') }}" data-src="{{ slide.image | static_url | settings_image_url('1080p') }}" class="slider-image swiper-lazy blur-up-huge"{% endif %} alt="{{ slide.description }}">
                            </div>
                            {% if slide.link %}
                                </a>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% endif %}
                </div>

But I did not succeed, what is shown me only the MOBILE version, even on the desktop, which is strange, because if even not working would have to show the 2..

But anyway, you can help me?

Note1: I thought to use @mediaqueries but it seems that the performance decreases a lot, because of making the request and then removing and as they are images heavy for desktop and light for mobile, they affect a lot the load.