Media Queries diagram (drawio)

resp-en-us.drawio

<mxfile host="app.diagrams.net" modified="2023-09-13T14:07:54.131Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/119.0" etag="ib-BMdHs5x3FEJKKzPCI" version="21.6.6">
  <diagram name="Page-1" id="XHp2qDrTD9_0xGDNzbsN">
    <mxGraphModel dx="1077" dy="617" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-2" value="" style="sketch=0;pointerEvents=1;shadow=0;dashed=0;html=1;strokeColor=none;fillColor=#005F4B;labelPosition=center;verticalLabelPosition=bottom;verticalAlign=top;align=center;outlineConnect=0;shape=mxgraph.veeam2.laptop;aspect=fixed;" vertex="1" parent="1">
          <mxGeometry x="70" y="210" width="634.29" height="370" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-4" value="" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shadow=0;dashed=0;strokeWidth=1;shape=mxgraph.android.phone2;strokeColor=#427368;fillColor=#49ab95;fontColor=#ffffff;" vertex="1" parent="1">
          <mxGeometry x="780" y="210" width="160" height="300" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-15" value="" style="html=1;verticalLabelPosition=bottom;align=center;labelBackgroundColor=#ffffff;verticalAlign=top;strokeWidth=2;strokeColor=#91cbff;shadow=0;dashed=0;shape=mxgraph.ios7.icons.window;" vertex="1" parent="1">
          <mxGeometry x="150" y="230" width="470" height="290" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-16" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/picture-128.png" vertex="1" parent="1">
          <mxGeometry x="160" y="290" width="140" height="140" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-18" value="&lt;h1&gt;Heading&lt;/h1&gt;&lt;div&gt;&lt;br&gt;&lt;/div&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;br&gt;Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo&lt;br&gt;&lt;/p&gt;" style="text;html=1;strokeColor=none;fillColor=none;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="300" y="290" width="287.85" height="200" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-19" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/picture-128.png" vertex="1" parent="1">
          <mxGeometry x="820" y="250" width="90" height="90" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-20" value="&lt;h1 style=&quot;line-height: 100%;&quot;&gt;&lt;font style=&quot;font-size: 19px;&quot;&gt;Heading&lt;/font&gt;&lt;/h1&gt;&lt;p style=&quot;font-size: 10px; line-height: 100%;&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;br&gt;&lt;br&gt;Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo&lt;br&gt;&lt;/p&gt;" style="text;html=1;strokeColor=none;fillColor=none;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;" vertex="1" parent="1">
          <mxGeometry x="790" y="330" width="140" height="150" as="geometry" />
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-23" value="Viewport width" style="endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=1;entryY=0.897;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=18;" edge="1" parent="1">
          <mxGeometry x="-0.0213" y="20" width="100" height="100" relative="1" as="geometry">
            <mxPoint x="150" y="190" as="sourcePoint" />
            <mxPoint x="620" y="190.1300000000001" as="targetPoint" />
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-25" value="Viewport width" style="endArrow=classic;startArrow=classic;html=1;rounded=0;fontSize=18;entryX=0.975;entryY=0.133;entryDx=0;entryDy=0;entryPerimeter=0;exitX=0.038;exitY=0.131;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
          <mxGeometry x="-0.0011" y="20" width="100" height="100" relative="1" as="geometry">
            <mxPoint x="785.04" y="190.00000000000006" as="sourcePoint" />
            <mxPoint x="934.96" y="190.59999999999997" as="targetPoint" />
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-26" value="Viewport&lt;br&gt;height" style="endArrow=classic;startArrow=classic;html=1;rounded=0;fontSize=18;exitX=0.964;exitY=0.994;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
          <mxGeometry x="0.1195" y="-40" width="100" height="100" relative="1" as="geometry">
            <mxPoint x="650.0000000000001" y="519.85" as="sourcePoint" />
            <mxPoint x="650" y="270" as="targetPoint" />
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
        <mxCell id="0Y2vVACd3wLrpoXDEIV2-30" value="Viewport&lt;br&gt;height" style="endArrow=classic;startArrow=classic;html=1;rounded=0;fontSize=18;" edge="1" parent="1">
          <mxGeometry x="0.1195" y="-40" width="100" height="100" relative="1" as="geometry">
            <mxPoint x="960" y="480" as="sourcePoint" />
            <mxPoint x="960" y="240.15" as="targetPoint" />
            <mxPoint as="offset" />
          </mxGeometry>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>