Fix input and file variables

docs/documentation/overview/responsiveness.html

@@ -9,11 +9,11 @@ breadcrumb:
 - overview
 - overview-responsiveness
 variables_keys:
-- gap
-- tablet
-- desktop
-- widescreen
-- fullhd
+- $gap
+- $tablet
+- $desktop
+- $widescreen
+- $fullhd
 ---
 
 {% capture scss_code %}
@@ -226,38 +226,13 @@ $fullhd-enabled: false
 
 {% endif %}
 
-{% include elements/anchor.html name="Variables" %}
+{% capture custom_message %}
+  These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
+{% endcapture %}
 
-<div class="content">
-  <p>
-    You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  </p>
-</div>
-
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for key in page.variables_keys %}
-      {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% include elements/variables.html
+  type='element'
+  variables_keys=page.variables_keys
+  custom_message=custom_message
+  responsiveness_variables=true
+%}