fixing flexbox examples

rachelandrew · rachelandrew · commit fc7ded5ac0fc · 2021-04-28T11:38:45.000+01:00
diff --git a/flexbox/use-cases/MDN.svg b/flexbox/use-cases/MDN.svg
@@ -0,0 +1,242 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg3624"
+   height="200"
+   width="226.85512"
+   version="1.1">
+  <defs
+     id="defs3626">
+    <linearGradient
+       gradientTransform="matrix(6.9964664,0,0,6.9964664,-353.18021,-4908.6219)"
+       gradientUnits="userSpaceOnUse"
+       id="SVGID_1_"
+       y2="701.59998"
+       x2="66.699997"
+       y1="730.20001"
+       x1="66.699997">
+      <stop
+         offset="0"
+         style="stop-color:#2075bc;stop-opacity:1"
+         id="stop7" />
+      <stop
+         offset="1"
+         style="stop-color:#29aae1;stop-opacity:1"
+         id="stop9" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(6.9964664,0,0,6.9964664,-353.18021,-4908.6219)"
+       gradientUnits="userSpaceOnUse"
+       id="SVGID_2_"
+       y2="701.59998"
+       x2="54.599998"
+       y1="730.20001"
+       x1="54.599998">
+      <stop
+         offset="0"
+         style="stop-color:#0a6aa8;stop-opacity:1"
+         id="stop16" />
+      <stop
+         offset="1"
+         style="stop-color:#1699c8;stop-opacity:1"
+         id="stop18" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)"
+       gradientUnits="userSpaceOnUse"
+       id="SVGID_3_"
+       y2="701.59998"
+       x2="62.599998"
+       y1="730.20001"
+       x1="62.599998">
+      <stop
+         offset="0"
+         style="stop-color:#2075bc;stop-opacity:1"
+         id="stop23" />
+      <stop
+         offset="1"
+         style="stop-color:#29aae1;stop-opacity:1"
+         id="stop25" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(6.9964664,0,0,6.9964664,-353.18021,-4908.6219)"
+       gradientUnits="userSpaceOnUse"
+       id="SVGID_4_"
+       y2="701.59998"
+       x2="70.699997"
+       y1="730.20001"
+       x1="70.699997">
+      <stop
+         offset="0"
+         style="stop-color:#0a6aa8;stop-opacity:1"
+         id="stop30" />
+      <stop
+         offset="1"
+         style="stop-color:#1699c8;stop-opacity:1"
+         id="stop32" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)"
+       gradientUnits="userSpaceOnUse"
+       id="SVGID_5_"
+       y2="701.59998"
+       x2="78.800003"
+       y1="730.20001"
+       x1="78.800003">
+      <stop
+         offset="0"
+         style="stop-color:#2075bc;stop-opacity:1"
+         id="stop37" />
+      <stop
+         offset="1"
+         style="stop-color:#29aae1;stop-opacity:1"
+         id="stop39" />
+    </linearGradient>
+    <clipPath
+       id="SVGID_7_">
+      <path
+         d="m 374.03729,71.690585 c -2.12014,-6.007081 -1.41343,-16.25446 -2.4735,-17.667892 -6.71377,-9.187305 -30.74202,-10.600737 -41.69607,-22.614905 1.76678,-6.007084 -2.12014,-10.600737 -6.00706,-14.487673 -6.00706,-4.240295 -14.13426,-2.473506 -20.49468,-0.706716 -7.06713,-1.413432 -13.7809,-4.240295 -20.84803,-6.007084 -15.54769,-1.76679 -31.09538,9.187305 -31.09538,9.187305 -11.3074,7.067158 -28.62187,21.908189 -37.10243,30.388778 2.12014,0.353358 4.24028,-1.413431 6.71377,-1.413431 l 16.2544,-4.240295 c -6.71377,5.653726 -20.84803,15.19439 -25.08831,22.968263 4.94699,-1.766789 15.54769,-7.420516 20.84803,-8.127231 -4.59363,3.886936 -14.13426,11.660811 -17.31447,16.607821 0.35336,0.35336 0,0.70672 0,1.06007 3.88693,-2.12014 13.42755,-7.77387 18.02119,-8.12723 -4.59364,4.59365 -12.72084,13.78096 -14.48762,19.78804 3.88692,-2.4735 13.78091,-7.77387 18.02118,-9.1873 -1.06007,2.4735 -3.18021,4.24029 -4.59363,6.36044 -2.12014,3.18022 -6.71378,7.06716 -6.71378,10.9541 3.53357,-3.18023 7.77385,-6.00709 12.01413,-8.12724 -1.76679,3.88694 -5.30035,7.06716 -6.36042,12.014165 2.82685,-2.826855 8.1272,-4.240285 11.66076,-5.300365 l -0.35335,0.35336 c -0.35336,0.35336 -4.24028,3.18022 -7.06713,6.360445 2.47349,0 0.70671,-0.35336 3.88692,0.35336 l 1.76678,0 c -0.70671,0.35336 -1.76678,1.06008 -2.82685,1.41343 l 0,0 c -1.41343,0.70672 -3.18021,1.76679 -4.59364,2.47351 6.71378,8.48059 14.84098,15.54775 24.3816,20.1414 12.36748,6.00708 25.79503,8.12722 39.57593,6.36044 0,-0.70672 -0.35335,-1.41343 -0.70671,-2.47351 l 0,0 0,0 c -0.35335,-1.06007 -0.70671,-1.76678 -0.70671,-2.82686 l 0,0 0,0 c 4.59363,-8.48059 2.12014,-23.32162 14.13426,-29.328705 8.1272,-4.2403 8.83391,-6.36045 18.02118,-4.59366 4.94699,1.06008 15.90105,4.59366 20.84804,3.53358 4.59363,-2.4735 7.06713,-3.88693 11.30741,-6.7138 4.94699,1.06008 6.71377,0.35336 8.48055,-2.12014 -1.76678,2.4735 3.18021,-9.18731 5.30035,-13.4276 l -0.70671,-2.82687 z"
+         id="use53" />
+    </clipPath>
+    <clipPath
+       id="SVGID_9_">
+      <path
+         id="use65"
+         d="m 258,115.7 c -0.6,-1.7 -0.4,-4.6 -0.7,-5 -1.9,-2.6 -8.7,-3 -11.8,-6.4 0.5,-1.7 -0.6,-3 -1.7,-4.1 -1.7,-1.2 -4,-0.7 -5.8,-0.2 -2,-0.4 -3.9,-1.2 -5.9,-1.7 -4.4,-0.5 -8.8,2.6 -8.8,2.6 -3.2,2 -8.1,6.2 -10.5,8.6 0.6,0.1 1.2,-0.4 1.9,-0.4 l 4.6,-1.2 c -1.9,1.6 -5.9,4.3 -7.1,6.5 1.4,-0.5 4.4,-2.1 5.9,-2.3 -1.3,1.1 -4,3.3 -4.9,4.7 0.1,0.1 0,0.2 0,0.3 1.1,-0.6 3.8,-2.2 5.1,-2.3 -1.3,1.3 -3.6,3.9 -4.1,5.6 1.1,-0.7 3.9,-2.2 5.1,-2.6 -0.3,0.7 -0.9,1.2 -1.3,1.8 -0.6,0.9 -1.9,2 -1.9,3.1 1,-0.9 2.2,-1.7 3.4,-2.3 -0.5,1.1 -1.5,2 -1.8,3.4 0.8,-0.8 2.3,-1.2 3.3,-1.5 l -0.1,0.1 c -0.1,0.1 -1.2,0.9 -2,1.8 0.7,0 0.2,-0.1 1.1,0.1 l 0.5,0 c -0.2,0.1 -0.5,0.3 -0.8,0.4 l 0,0 c -0.4,0.2 -0.9,0.5 -1.3,0.7 1.9,2.4 4.2,4.4 6.9,5.7 3.5,1.7 7.3,2.3 11.2,1.8 0,-0.2 -0.1,-0.4 -0.2,-0.7 l 0,0 0,0 c -0.1,-0.3 -0.2,-0.5 -0.2,-0.8 l 0,0 0,0 c 1.3,-2.4 0.6,-6.6 4,-8.3 2.3,-1.2 2.5,-1.8 5.1,-1.3 1.4,0.3 4.5,1.3 5.9,1 1.3,-0.7 2,-1.1 3.2,-1.9 1.4,0.3 1.9,0.1 2.4,-0.6 -0.5,0.7 0.9,-2.6 1.5,-3.8 l -0.2,-0.8 z" />
+    </clipPath>
+    <clipPath
+       id="SVGID_11_">
+      <path
+         id="use77"
+         d="m 258,115.7 c -0.6,-1.7 -0.4,-4.6 -0.7,-5 -1.9,-2.6 -8.7,-3 -11.8,-6.4 0.5,-1.7 -0.6,-3 -1.7,-4.1 -1.7,-1.2 -4,-0.7 -5.8,-0.2 -2,-0.4 -3.9,-1.2 -5.9,-1.7 -4.4,-0.5 -8.8,2.6 -8.8,2.6 -3.2,2 -8.1,6.2 -10.5,8.6 0.6,0.1 1.2,-0.4 1.9,-0.4 l 4.6,-1.2 c -1.9,1.6 -5.9,4.3 -7.1,6.5 1.4,-0.5 4.4,-2.1 5.9,-2.3 -1.3,1.1 -4,3.3 -4.9,4.7 0.1,0.1 0,0.2 0,0.3 1.1,-0.6 3.8,-2.2 5.1,-2.3 -1.3,1.3 -3.6,3.9 -4.1,5.6 1.1,-0.7 3.9,-2.2 5.1,-2.6 -0.3,0.7 -0.9,1.2 -1.3,1.8 -0.6,0.9 -1.9,2 -1.9,3.1 1,-0.9 2.2,-1.7 3.4,-2.3 -0.5,1.1 -1.5,2 -1.8,3.4 0.8,-0.8 2.3,-1.2 3.3,-1.5 l -0.1,0.1 c -0.1,0.1 -1.2,0.9 -2,1.8 0.7,0 0.2,-0.1 1.1,0.1 l 0.5,0 c -0.2,0.1 -0.5,0.3 -0.8,0.4 l 0,0 c -0.4,0.2 -0.9,0.5 -1.3,0.7 1.9,2.4 4.2,4.4 6.9,5.7 3.5,1.7 7.3,2.3 11.2,1.8 0,-0.2 -0.1,-0.4 -0.2,-0.7 l 0,0 0,0 c -0.1,-0.3 -0.2,-0.5 -0.2,-0.8 l 0,0 0,0 c 1.3,-2.4 0.6,-6.6 4,-8.3 2.3,-1.2 2.5,-1.8 5.1,-1.3 1.4,0.3 4.5,1.3 5.9,1 1.3,-0.7 2,-1.1 3.2,-1.9 1.4,0.3 1.9,0.1 2.4,-0.6 -0.5,0.7 0.9,-2.6 1.5,-3.8 l -0.2,-0.8 z" />
+    </clipPath>
+    <clipPath
+       id="SVGID_13_">
+      <path
+         id="use89"
+         d="m 258,115.7 c -0.6,-1.7 -0.4,-4.6 -0.7,-5 -1.9,-2.6 -8.7,-3 -11.8,-6.4 0.5,-1.7 -0.6,-3 -1.7,-4.1 -1.7,-1.2 -4,-0.7 -5.8,-0.2 -2,-0.4 -3.9,-1.2 -5.9,-1.7 -4.4,-0.5 -8.8,2.6 -8.8,2.6 -3.2,2 -8.1,6.2 -10.5,8.6 0.6,0.1 1.2,-0.4 1.9,-0.4 l 4.6,-1.2 c -1.9,1.6 -5.9,4.3 -7.1,6.5 1.4,-0.5 4.4,-2.1 5.9,-2.3 -1.3,1.1 -4,3.3 -4.9,4.7 0.1,0.1 0,0.2 0,0.3 1.1,-0.6 3.8,-2.2 5.1,-2.3 -1.3,1.3 -3.6,3.9 -4.1,5.6 1.1,-0.7 3.9,-2.2 5.1,-2.6 -0.3,0.7 -0.9,1.2 -1.3,1.8 -0.6,0.9 -1.9,2 -1.9,3.1 1,-0.9 2.2,-1.7 3.4,-2.3 -0.5,1.1 -1.5,2 -1.8,3.4 0.8,-0.8 2.3,-1.2 3.3,-1.5 l -0.1,0.1 c -0.1,0.1 -1.2,0.9 -2,1.8 0.7,0 0.2,-0.1 1.1,0.1 l 0.5,0 c -0.2,0.1 -0.5,0.3 -0.8,0.4 l 0,0 c -0.4,0.2 -0.9,0.5 -1.3,0.7 1.9,2.4 4.2,4.4 6.9,5.7 3.5,1.7 7.3,2.3 11.2,1.8 0,-0.2 -0.1,-0.4 -0.2,-0.7 l 0,0 0,0 c -0.1,-0.3 -0.2,-0.5 -0.2,-0.8 l 0,0 0,0 c 1.3,-2.4 0.6,-6.6 4,-8.3 2.3,-1.2 2.5,-1.8 5.1,-1.3 1.4,0.3 4.5,1.3 5.9,1 1.3,-0.7 2,-1.1 3.2,-1.9 1.4,0.3 1.9,0.1 2.4,-0.6 -0.5,0.7 0.9,-2.6 1.5,-3.8 l -0.2,-0.8 z" />
+    </clipPath>
+    <clipPath
+       id="SVGID_15_">
+      <path
+         id="use101"
+         d="m 258,115.7 c -0.6,-1.7 -0.4,-4.6 -0.7,-5 -1.9,-2.6 -8.7,-3 -11.8,-6.4 0.5,-1.7 -0.6,-3 -1.7,-4.1 -1.7,-1.2 -4,-0.7 -5.8,-0.2 -2,-0.4 -3.9,-1.2 -5.9,-1.7 -4.4,-0.5 -8.8,2.6 -8.8,2.6 -3.2,2 -8.1,6.2 -10.5,8.6 0.6,0.1 1.2,-0.4 1.9,-0.4 l 4.6,-1.2 c -1.9,1.6 -5.9,4.3 -7.1,6.5 1.4,-0.5 4.4,-2.1 5.9,-2.3 -1.3,1.1 -4,3.3 -4.9,4.7 0.1,0.1 0,0.2 0,0.3 1.1,-0.6 3.8,-2.2 5.1,-2.3 -1.3,1.3 -3.6,3.9 -4.1,5.6 1.1,-0.7 3.9,-2.2 5.1,-2.6 -0.3,0.7 -0.9,1.2 -1.3,1.8 -0.6,0.9 -1.9,2 -1.9,3.1 1,-0.9 2.2,-1.7 3.4,-2.3 -0.5,1.1 -1.5,2 -1.8,3.4 0.8,-0.8 2.3,-1.2 3.3,-1.5 l -0.1,0.1 c -0.1,0.1 -1.2,0.9 -2,1.8 0.7,0 0.2,-0.1 1.1,0.1 l 0.5,0 c -0.2,0.1 -0.5,0.3 -0.8,0.4 l 0,0 c -0.4,0.2 -0.9,0.5 -1.3,0.7 1.9,2.4 4.2,4.4 6.9,5.7 3.5,1.7 7.3,2.3 11.2,1.8 0,-0.2 -0.1,-0.4 -0.2,-0.7 l 0,0 0,0 c -0.1,-0.3 -0.2,-0.5 -0.2,-0.8 l 0,0 0,0 c 1.3,-2.4 0.6,-6.6 4,-8.3 2.3,-1.2 2.5,-1.8 5.1,-1.3 1.4,0.3 4.5,1.3 5.9,1 1.3,-0.7 2,-1.1 3.2,-1.9 1.4,0.3 1.9,0.1 2.4,-0.6 -0.5,0.7 0.9,-2.6 1.5,-3.8 l -0.2,-0.8 z" />
+    </clipPath>
+    <linearGradient
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)"
+       gradientUnits="userSpaceOnUse"
+       id="linearGradient3542"
+       y2="701.59998"
+       x2="66.699997"
+       y1="730.20001"
+       x1="66.699997">
+      <stop
+         offset="0"
+         style="stop-color:#2075bc;stop-opacity:1"
+         id="stop3544" />
+      <stop
+         offset="1"
+         style="stop-color:#29aae1;stop-opacity:1"
+         id="stop3546" />
+    </linearGradient>
+    <linearGradient
+       x1="54.599998"
+       y1="730.20001"
+       x2="54.599998"
+       y2="701.59998"
+       id="linearGradient3550"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)">
+      <stop
+         id="stop3552"
+         style="stop-color:#0a6aa8;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3554"
+         style="stop-color:#1699c8;stop-opacity:1"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="62.599998"
+       y1="730.20001"
+       x2="62.599998"
+       y2="701.59998"
+       id="linearGradient3557"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)">
+      <stop
+         id="stop3559"
+         style="stop-color:#2075bc;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3561"
+         style="stop-color:#29aae1;stop-opacity:1"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="70.699997"
+       y1="730.20001"
+       x2="70.699997"
+       y2="701.59998"
+       id="linearGradient3564"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)">
+      <stop
+         id="stop3566"
+         style="stop-color:#0a6aa8;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3568"
+         style="stop-color:#1699c8;stop-opacity:1"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       x1="78.800003"
+       y1="730.20001"
+       x2="78.800003"
+       y2="701.59998"
+       id="linearGradient3571"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.98,0,0,1.98,103.05,-1302.84)">
+      <stop
+         id="stop3573"
+         style="stop-color:#2075bc;stop-opacity:1"
+         offset="0" />
+      <stop
+         id="stop3575"
+         style="stop-color:#29aae1;stop-opacity:1"
+         offset="1" />
+    </linearGradient>
+  </defs>
+  <metadata
+     id="metadata3629">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g5461">
+    <path
+       style="fill:url(#SVGID_1_)"
+       d="M 56.890625 0 L 56.537109 0.35351562 L 0 22.96875 L 0 200 L 56.537109 178.44531 L 113.42773 200 L 169.96484 178.44531 L 226.85547 200 L 226.85547 22.96875 L 169.96484 0.35351562 L 169.61133 0 L 169.61133 0.35351562 L 113.42773 22.615234 L 56.890625 0.35351562 L 56.890625 0 z M 99.916016 42.214844 C 100.88395 42.231666 101.85444 42.291919 102.82617 42.402344 C 109.8933 44.169133 116.60865 46.996724 123.67578 48.410156 C 130.0362 46.643366 138.16286 44.876893 144.16992 49.117188 C 148.05684 53.004123 151.94256 57.596432 150.17578 63.603516 C 161.12983 75.617684 185.15928 77.031445 191.87305 86.21875 C 192.93312 87.632182 192.22556 97.879638 194.3457 103.88672 L 195.05273 106.71484 C 192.93259 110.95513 187.98517 122.61413 189.75195 120.14062 C 187.98517 122.61413 186.21847 123.3218 181.27148 122.26172 C 177.0312 125.08859 174.55847 126.50111 169.96484 128.97461 C 165.01785 130.03469 154.06418 126.50149 149.11719 125.44141 C 139.92992 123.67462 139.2229 125.79486 131.0957 130.03516 C 119.08158 136.04224 121.55457 150.88464 116.96094 159.36523 C 116.96094 160.42531 117.31462 161.13134 117.66797 162.19141 C 118.02133 163.25149 118.375 163.95734 118.375 164.66406 C 104.5941 166.43085 91.166307 164.31177 78.798828 158.30469 C 69.258202 153.71104 61.131743 146.6427 54.417969 138.16211 C 55.831395 137.45539 57.59634 136.39617 59.009766 135.68945 C 60.069836 135.3361 61.131178 134.62875 61.837891 134.27539 L 60.070312 134.27539 C 56.890104 133.56868 58.65709 133.92188 56.183594 133.92188 C 59.010446 130.74166 62.898597 127.91586 63.251953 127.5625 L 63.603516 127.20898 C 60.069951 128.26906 54.770211 129.68291 51.943359 132.50977 C 53.003428 127.56276 56.537905 124.38108 58.304688 120.49414 C 54.06441 122.61429 49.822629 125.44282 46.289062 128.62305 C 46.289063 124.73611 50.883767 120.84819 53.003906 117.66797 C 54.417332 115.54782 56.537586 113.78209 57.597656 111.30859 C 53.357378 112.72202 43.463094 118.02064 39.576172 120.49414 C 41.342955 114.48706 49.470818 105.30068 54.064453 100.70703 C 49.470818 101.06039 39.929891 106.71384 36.042969 108.83398 C 36.042969 108.48063 36.396326 108.1268 36.042969 107.77344 C 39.223178 102.82643 48.763787 95.052952 53.357422 91.166016 C 48.057074 91.872731 37.456757 97.52618 32.509766 99.292969 C 36.750044 91.519096 50.883882 81.979898 57.597656 76.326172 L 41.34375 80.566406 C 38.870254 80.566406 36.749045 82.331874 34.628906 81.978516 C 43.109463 73.497927 60.425013 58.657002 71.732422 51.589844 C 71.732422 51.589844 85.396995 41.962506 99.916016 42.214844 z "
+       id="polygon11" />
+    <path
+       style="fill:url(#SVGID_2_)"
+       d="M 56.890625 0 L 0 22.96875 L 0 200 L 56.890625 178.44531 L 56.890625 141.14062 C 56.047226 140.1686 55.220932 139.17638 54.417969 138.16211 C 55.178691 137.78174 56.035368 137.30693 56.890625 136.83203 L 56.890625 133.89648 C 56.681142 133.90726 56.546991 133.92188 56.183594 133.92188 C 56.41036 133.66676 56.652587 133.41939 56.890625 133.16992 L 56.890625 129.46289 C 55.000394 130.25969 53.217112 131.23601 51.943359 132.50977 C 52.76574 128.67197 55.070722 125.89532 56.890625 123.0293 L 56.890625 121.23047 C 53.12951 123.2507 49.429796 125.79637 46.289062 128.62305 C 46.289063 124.73611 50.883767 120.84819 53.003906 117.66797 C 54.151688 115.94629 55.75689 114.45222 56.890625 112.62891 L 56.890625 111.57812 C 52.361515 113.26548 43.275547 118.13999 39.576172 120.49414 C 41.342955 114.48706 49.470818 105.30068 54.064453 100.70703 C 49.470818 101.06039 39.929891 106.71384 36.042969 108.83398 C 36.042969 108.48063 36.396326 108.1268 36.042969 107.77344 C 39.223178 102.82643 48.763787 95.052952 53.357422 91.166016 C 48.057074 91.872731 37.456757 97.52618 32.509766 99.292969 C 36.61769 91.761745 49.953975 82.60543 56.890625 76.898438 L 56.890625 76.509766 L 41.34375 80.566406 C 38.870254 80.566406 36.749045 82.331874 34.628906 81.978516 C 39.85305 76.754352 48.431252 69.122349 56.890625 62.375 L 56.890625 0 z "
+       id="polygon20" />
+    <path
+       style="fill:url(#SVGID_4_)"
+       d="M 169.96484 0 L 113.42773 22.96875 L 113.42773 45.595703 C 116.81372 46.679369 120.203 47.715597 123.67578 48.410156 C 130.0362 46.643366 138.16286 44.876893 144.16992 49.117188 C 148.05684 53.004123 151.94256 57.596432 150.17578 63.603516 C 155.06704 68.968149 162.5655 72.216957 169.96484 74.990234 L 169.96484 0 z M 143.56836 124.81836 C 139.11276 124.86805 137.1911 126.85493 131.0957 130.03516 C 119.08158 136.04224 121.55457 150.88464 116.96094 159.36523 C 116.96094 160.42531 117.31462 161.13134 117.66797 162.19141 C 118.02133 163.25149 118.375 163.95734 118.375 164.66406 C 116.72046 164.87618 115.07086 165.02884 113.42773 165.12891 L 113.42773 200 L 169.96484 178.44531 L 169.96484 128.97461 C 165.01785 130.03469 154.06418 126.50149 149.11719 125.44141 C 146.82037 124.99971 145.05356 124.8018 143.56836 124.81836 z "
+       id="polygon34" />
+  </g>
+</svg>
diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html
@@ -61,7 +61,7 @@
     }
 
     .media {
-      width: 300px;
+      width: 500px;
       border: 2px dotted rgb(96, 139, 168);
     }
 
@@ -94,7 +94,7 @@
 <body>
   <section>
     <div class="media flipped">
-      <div class="image"><img src="https://placehold.it/60x60" alt="placeholder"></div>
+      <div class="image"><img src="MDN.svg" alt="MDN logo"></div>
       <div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
     </div>
 
@@ -114,7 +114,7 @@
       </textarea>
   <textarea id="code" class="playable-html">
 <div class="media flipped">
-  <div class="image"><img src="https://placehold.it/60x60" alt="placeholder"></div>
+  <div class="image"><img src="MDN.svg" alt="MDN logo"></div>
     <div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
 </div>
       </textarea>
diff --git a/flexbox/use-cases/media.html b/flexbox/use-cases/media.html
@@ -61,7 +61,7 @@
     }
 
     .media {
-      width: 300px;
+      width: 500px;
       border: 2px dotted rgb(96, 139, 168);
     }
 
@@ -86,7 +86,7 @@
 <body>
   <section>
     <div class="media">
-      <div class="image"><img src="https://placehold.it/60x60" alt="placeholder"></div>
+      <div class="image"><img src="MDN.svg" alt="MDN logo"></div>
       <div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
     </div>
 
@@ -102,8 +102,7 @@
 }
       </textarea>
   <textarea id="code" class="playable-html">
-<div class="media">
-  <div class="image"><img src="https://placehold.it/60x60" alt="placeholder"></div>
+<div class="media">MDN logo"></div>
     <div class="content">This is the content of my media object. Items directly inside the flex container will be aligned to flex-start.</div>
 </div>
       </textarea>
