fix: prevent quick-facts column styling on mobile

src/views/Anatomy.vue

@@ -47,7 +47,7 @@
     <data-table class="prose" :dataset="getSebinData.colors" />
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Bipedal plantigrade</li>
         <li>Red and yellow scales</li>
         <li>Yellow scales under chin, torso, underside of tail</li>
@@ -78,7 +78,7 @@
     <h3>Wings</h3>
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>
           Wingspan {{ wingspan / 100 }} meters ({{ toImperial(this.wingspan) }})
         </li>
@@ -120,7 +120,7 @@
     </ref-figure>
 
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Round pupils, green iris</li>
         <li>Yellow spikes for eyebrows</li>
         <li>Yellow spikes on cheeks</li>
@@ -151,7 +151,7 @@
 
     <h3>Upper Body</h3>
     <quick-facts>
-      <ul>
+      <ul class="col-2">
         <li>Strong upper body</li>
         <li>Big pecs</li>
         <li>Defined abs</li>
@@ -371,7 +371,7 @@
       <data-table :dataset="getSebinData.penis" />
 
       <quick-facts>
-        <ul>
+        <ul class="col-2">
           <li>Human-shaped with ridges</li>
           <li>Ring-like sheath surrounding shaft</li>
           <li>

src/views/General.vue

@@ -139,7 +139,7 @@
       <data-table :dataset="getSebinData.preferences" />
 
       <quick-facts>
-        <ul class="col-3">
+        <ul class="col-2">
           <li>Supremely horny</li>
           <li>Confident, knows what he's got</li>
           <li>Dominant lover, likes it rough but is no brute</li>
@@ -200,7 +200,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import "@/scss/_mixins.scss";
+
 ul {
+  @include mq-desktop {
     &.col-2 {
       columns: 2 auto;
     }
@@ -212,5 +215,6 @@ ul {
     &.col-4 {
       columns: 4 auto;
     }
+  }
 }
 </style>