diff --git a/aircox/middleware.py b/aircox/middleware.py
index 3382ee4..8b5cbb1 100644
--- a/aircox/middleware.py
+++ b/aircox/middleware.py
@@ -13,6 +13,7 @@ class AircoxMiddleware(object):
     """Middleware used to get default info for the given website.
 
     It provide following request attributes:
+    - ``mobile``: set to True if mobile device is detected
     - ``station``: current Station
 
     This middleware must be set after the middleware
@@ -24,6 +25,11 @@ class AircoxMiddleware(object):
     def __init__(self, get_response):
         self.get_response = get_response
 
+    def is_mobile(self, request):
+        if agent := request.META.get("HTTP_USER_AGENT"):
+            return " Mobi" in agent
+        return False
+
     def get_station(self, request):
         """Return station for the provided request."""
         host = request.get_host()
@@ -45,6 +51,7 @@ class AircoxMiddleware(object):
     def __call__(self, request):
         self.init_timezone(request)
         request.station = self.get_station(request)
+        request.is_mobile = self.is_mobile(request)
         try:
             return self.get_response(request)
         except Redirect:
diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css
index 6551264..5ec523f 100644
--- a/aircox/static/aircox/css/admin.css
+++ b/aircox/static/aircox/css/admin.css
@@ -27,8 +27,8 @@
   --preview-cover-size: 14rem;
   --preview-cover-small-size: 10rem;
   --preview-cover-tiny-size: 4rem;
-  --preview-wide-content-sz: 1.6rem;
-  --preview-heading-bg-color: var(--hg-color);
+  --preview-wide-content-sz: 1.2rem;
+  --preview-heading-bg-color: var(--main-color);
   --header-height: var(--cover-h);
   --a-carousel-p: 1.4rem;
   --a-carousel-ml: calc(1.2rem - 0.5rem);
@@ -76,9 +76,6 @@
     --cover-tiny-w: 4rem;
     --cover-tiny-h: 4rem;
     --section-content-sz: 1rem;
-    --preview-title-sz: 1rem;
-    --preview-subtitle-sz: 0.8rem;
-    --preview-wide-content-sz: 1rem;
   }
 }
 .title.is-1, .header.preview .title.is-1 {
@@ -288,7 +285,7 @@
   transition: box-shadow 0.2s;
 }
 .preview-card:hover figure {
-  box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
 }
 .preview-card:hover a {
   color: var(--heading-link-hv-fg);
@@ -299,9 +296,6 @@
 .preview-card .headings .heading {
   display: block !important;
 }
-.preview-card .headings .title {
-  overflow: hidden;
-}
 .preview-card .headings .subtitle {
   font-size: 1.2rem;
 }
@@ -310,7 +304,6 @@
   position: relative;
 }
 .preview-card .card-content figure {
-  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
   height: var(--cover-h);
   width: var(--cover-w);
 }
@@ -321,18 +314,6 @@
   right: 0rem;
 }
 
-.list-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-flow: dense;
-  gap: 1.2rem;
-}
-
-@media screen and (max-width: 900px) {
-  .list-grid {
-    grid-template-columns: 1fr;
-  }
-}
 .a-carousel .a-carousel-viewport {
   box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
   padding: 0rem;
@@ -2795,9 +2776,9 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   cursor: pointer;
 }
 #player .button[disabled], #player .button.disabled, #player a.button[disabled], #player a.button.disabled, #player button.button[disabled], #player button.button.disabled, .ax .button[disabled], .ax .button.disabled, .ax a.button[disabled], .ax a.button.disabled, .ax button.button[disabled], .ax button.button.disabled {
-  background-color: var(--hg-color-grey);
-  color: var(--hg-color-2);
-  border-color: var(--hg-color-2-alpha);
+  background-color: var(--text-color-light);
+  color: var(--secondary-color);
+  border-color: var(--secondary-color-light);
 }
 #player .button .dropdown-trigger, #player a.button .dropdown-trigger, #player button.button .dropdown-trigger, .ax .button .dropdown-trigger, .ax a.button .dropdown-trigger, .ax button.button .dropdown-trigger {
   border-radius: 1.5em;
diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css
index 6c5a061..dbc0849 100644
--- a/aircox/static/aircox/css/chunk-common.css
+++ b/aircox/static/aircox/css/chunk-common.css
@@ -98,7 +98,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
   width: 0.625em;
 }
 
-.table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
+.table-container:not(:last-child), .table:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
@@ -6238,175 +6238,6 @@ a.box:active {
   }
 }
 
-.content li + li {
-  margin-top: 0.25em;
-}
-.content p:not(:last-child),
-.content dl:not(:last-child),
-.content ol:not(:last-child),
-.content ul:not(:last-child),
-.content blockquote:not(:last-child),
-.content pre:not(:last-child),
-.content table:not(:last-child) {
-  margin-bottom: 1em;
-}
-.content h1,
-.content h2,
-.content h3,
-.content h4,
-.content h5,
-.content h6 {
-  color: hsl(0deg, 0%, 21%);
-  font-weight: 600;
-  line-height: 1.125;
-}
-.content h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
-}
-.content h1:not(:first-child) {
-  margin-top: 1em;
-}
-.content h2 {
-  font-size: 1.75em;
-  margin-bottom: 0.5714em;
-}
-.content h2:not(:first-child) {
-  margin-top: 1.1428em;
-}
-.content h3 {
-  font-size: 1.5em;
-  margin-bottom: 0.6666em;
-}
-.content h3:not(:first-child) {
-  margin-top: 1.3333em;
-}
-.content h4 {
-  font-size: 1.25em;
-  margin-bottom: 0.8em;
-}
-.content h5 {
-  font-size: 1.125em;
-  margin-bottom: 0.8888em;
-}
-.content h6 {
-  font-size: 1em;
-  margin-bottom: 1em;
-}
-.content blockquote {
-  background-color: hsl(0deg, 0%, 96%);
-  border-left: 5px solid hsl(0deg, 0%, 86%);
-  padding: 1.25em 1.5em;
-}
-.content ol {
-  list-style-position: outside;
-  margin-left: 2em;
-  margin-top: 1em;
-}
-.content ol:not([type]) {
-  list-style-type: decimal;
-}
-.content ol:not([type]).is-lower-alpha {
-  list-style-type: lower-alpha;
-}
-.content ol:not([type]).is-lower-roman {
-  list-style-type: lower-roman;
-}
-.content ol:not([type]).is-upper-alpha {
-  list-style-type: upper-alpha;
-}
-.content ol:not([type]).is-upper-roman {
-  list-style-type: upper-roman;
-}
-.content ul {
-  list-style: disc outside;
-  margin-left: 2em;
-  margin-top: 1em;
-}
-.content ul ul {
-  list-style-type: circle;
-  margin-top: 0.5em;
-}
-.content ul ul ul {
-  list-style-type: square;
-}
-.content dd {
-  margin-left: 2em;
-}
-.content figure {
-  margin-left: 2em;
-  margin-right: 2em;
-  text-align: center;
-}
-.content figure:not(:first-child) {
-  margin-top: 2em;
-}
-.content figure:not(:last-child) {
-  margin-bottom: 2em;
-}
-.content figure img {
-  display: inline-block;
-}
-.content figure figcaption {
-  font-style: italic;
-}
-.content pre {
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  padding: 1.25em 1.5em;
-  white-space: pre;
-  word-wrap: normal;
-}
-.content sup,
-.content sub {
-  font-size: 75%;
-}
-.content table {
-  width: 100%;
-}
-.content table td,
-.content table th {
-  border: 1px solid hsl(0deg, 0%, 86%);
-  border-width: 0 0 1px;
-  padding: 0.5em 0.75em;
-  vertical-align: top;
-}
-.content table th {
-  color: hsl(0deg, 0%, 21%);
-}
-.content table th:not([align]) {
-  text-align: inherit;
-}
-.content table thead td,
-.content table thead th {
-  border-width: 0 0 2px;
-  color: hsl(0deg, 0%, 21%);
-}
-.content table tfoot td,
-.content table tfoot th {
-  border-width: 2px 0 0;
-  color: hsl(0deg, 0%, 21%);
-}
-.content table tbody tr:last-child td,
-.content table tbody tr:last-child th {
-  border-bottom-width: 0;
-}
-.content .tabs li + li {
-  margin-top: 0;
-}
-.content.is-small {
-  font-size: 0.75rem;
-}
-.content.is-normal {
-  font-size: 1rem;
-}
-.content.is-medium {
-  font-size: 1.25rem;
-}
-.content.is-large {
-  font-size: 1.5rem;
-}
-
 .icon {
   align-items: center;
   display: inline-flex;
@@ -6846,21 +6677,58 @@ a.tag:hover {
   display: inline-block !important;
 }
 
-.push-right, .flex-push-right {
-  margin-left: auto !important;
+.p-relative {
+  position: relative !important;
 }
 
-.push-bottom {
-  margin-top: auto !important;
+.p-absolute {
+  position: absolute !important;
+}
+
+.p-fixed {
+  position: fixed !important;
+}
+
+.p-sticky {
+  position: sticky !important;
+}
+
+.p-static {
+  position: static !important;
+}
+
+.ws-nowrap {
+  white-space: nowrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: dense;
+  gap: 1.2rem;
+}
+
+.grid-1 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: dense;
+  gap: 1.2rem;
+  grid-template-columns: 1fr;
 }
 
 .grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  grid-auto-flow: dense;
+  gap: 1.2rem;
+  grid-template-columns: 1fr 1fr;
 }
 
 .grid-3 {
   display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-flow: dense;
+  gap: 1.2rem;
   grid-template-columns: 1fr 1fr 1fr;
 }
 
@@ -6905,8 +6773,8 @@ a.tag:hover {
   border-radius: 0;
 }
 
-.is-borderless {
-  border: none;
+.no-border {
+  border: 0px !important;
 }
 
 .overflow-hidden {
@@ -6917,38 +6785,10 @@ a.tag:hover {
   max-width: 100%;
 }
 
-.p-relative {
-  position: relative !important;
-}
-
-.p-absolute {
-  position: absolute !important;
-}
-
-.p-fixed {
-  position: fixed !important;
-}
-
-.p-sticky {
-  position: sticky !important;
-}
-
-.p-static {
-  position: static !important;
-}
-
 .height-full {
   height: 100%;
 }
 
-.ws-nowrap {
-  white-space: nowrap;
-}
-
-.no-border {
-  border: 0px !important;
-}
-
 *[draggable=true] {
   cursor: move;
 }
@@ -6969,12 +6809,12 @@ a.tag:hover {
   animation: 1s ease-in-out 1s infinite alternate blink;
 }
 
-.hg-color {
-  color: var(--highlight-color);
+.main-color {
+  color: var(--main-color);
 }
 
-.hg-color-2 {
-  color: var(--highlight-color-2);
+.secondary-color {
+  color: var(--secondary-color);
 }
 
 .bg-transparent {
@@ -7012,12 +6852,6 @@ input.half-field:not(:active):not(:hover) {
   --disabled-bg: #eee;
   --link-fg: #00A6A6;
   --link-hv-fg: var(--text-color);
-  --hg-color: #EFCA08;
-  --hg-color-alpha: #EFCA08B3;
-  --hg-color-grey: rgba(230, 230, 60, 1);
-  --hg-color-2: #F49F0A;
-  --hg-color-2-alpha: #F49F0AB3;
-  --hg-color-2-grey: rgba(50, 200, 200, 1);
   --nav-primary-height: 3rem;
   --nav-secondary-height: 2.5rem;
   --nav-fg: var(--text-color);
@@ -7031,24 +6865,37 @@ input.half-field:not(:active):not(:hover) {
   --nav-2-fs: 0.9rem;
 }
 
+:root {
+  font-size: 16px;
+}
+
 body {
-  font-size: 1.4em;
+  font-size: 1rem;
   background-color: var(--body-bg);
 }
 
+body.mobile .grid {
+  grid-template-columns: 1fr;
+}
+
 @media screen and (max-width: 1280px) {
-  body {
-    font-size: 1.2em;
+  html {
+    font-size: 18px !important;
   }
 }
 @media screen and (max-width: 1024px) {
-  body {
-    font-size: 1em;
+  html {
+    font-size: 20px !important;
   }
   :root {
     --header-height: 20rem;
   }
 }
+@media screen and (max-width: 900px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
 h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   font-family: var(--heading-font-family);
 }
diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css
index 7cd5cc6..d970bdd 100644
--- a/aircox/static/aircox/css/public.css
+++ b/aircox/static/aircox/css/public.css
@@ -27,8 +27,8 @@
   --preview-cover-size: 14rem;
   --preview-cover-small-size: 10rem;
   --preview-cover-tiny-size: 4rem;
-  --preview-wide-content-sz: 1.6rem;
-  --preview-heading-bg-color: var(--hg-color);
+  --preview-wide-content-sz: 1.2rem;
+  --preview-heading-bg-color: var(--main-color);
   --header-height: var(--cover-h);
   --a-carousel-p: 1.4rem;
   --a-carousel-ml: calc(1.2rem - 0.5rem);
@@ -76,9 +76,6 @@
     --cover-tiny-w: 4rem;
     --cover-tiny-h: 4rem;
     --section-content-sz: 1rem;
-    --preview-title-sz: 1rem;
-    --preview-subtitle-sz: 0.8rem;
-    --preview-wide-content-sz: 1rem;
   }
 }
 .title.is-1, .header.preview .title.is-1 {
@@ -288,7 +285,7 @@
   transition: box-shadow 0.2s;
 }
 .preview-card:hover figure {
-  box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
 }
 .preview-card:hover a {
   color: var(--heading-link-hv-fg);
@@ -299,9 +296,6 @@
 .preview-card .headings .heading {
   display: block !important;
 }
-.preview-card .headings .title {
-  overflow: hidden;
-}
 .preview-card .headings .subtitle {
   font-size: 1.2rem;
 }
@@ -310,7 +304,6 @@
   position: relative;
 }
 .preview-card .card-content figure {
-  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
   height: var(--cover-h);
   width: var(--cover-w);
 }
@@ -321,18 +314,6 @@
   right: 0rem;
 }
 
-.list-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-auto-flow: dense;
-  gap: 1.2rem;
-}
-
-@media screen and (max-width: 900px) {
-  .list-grid {
-    grid-template-columns: 1fr;
-  }
-}
 .a-carousel .a-carousel-viewport {
   box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
   padding: 0rem;
@@ -602,7 +583,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
   width: 0.625em;
 }
 
-.table-container:not(:last-child), .table:not(:last-child), .content:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
+.table-container:not(:last-child), .table:not(:last-child), .box:not(:last-child), .message:not(:last-child) {
   margin-bottom: 1.5rem;
 }
 
@@ -6742,175 +6723,6 @@ a.box:active {
   }
 }
 
-.content li + li {
-  margin-top: 0.25em;
-}
-.content p:not(:last-child),
-.content dl:not(:last-child),
-.content ol:not(:last-child),
-.content ul:not(:last-child),
-.content blockquote:not(:last-child),
-.content pre:not(:last-child),
-.content table:not(:last-child) {
-  margin-bottom: 1em;
-}
-.content h1,
-.content h2,
-.content h3,
-.content h4,
-.content h5,
-.content h6 {
-  color: hsl(0deg, 0%, 21%);
-  font-weight: 600;
-  line-height: 1.125;
-}
-.content h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
-}
-.content h1:not(:first-child) {
-  margin-top: 1em;
-}
-.content h2 {
-  font-size: 1.75em;
-  margin-bottom: 0.5714em;
-}
-.content h2:not(:first-child) {
-  margin-top: 1.1428em;
-}
-.content h3 {
-  font-size: 1.5em;
-  margin-bottom: 0.6666em;
-}
-.content h3:not(:first-child) {
-  margin-top: 1.3333em;
-}
-.content h4 {
-  font-size: 1.25em;
-  margin-bottom: 0.8em;
-}
-.content h5 {
-  font-size: 1.125em;
-  margin-bottom: 0.8888em;
-}
-.content h6 {
-  font-size: 1em;
-  margin-bottom: 1em;
-}
-.content blockquote {
-  background-color: hsl(0deg, 0%, 96%);
-  border-left: 5px solid hsl(0deg, 0%, 86%);
-  padding: 1.25em 1.5em;
-}
-.content ol {
-  list-style-position: outside;
-  margin-left: 2em;
-  margin-top: 1em;
-}
-.content ol:not([type]) {
-  list-style-type: decimal;
-}
-.content ol:not([type]).is-lower-alpha {
-  list-style-type: lower-alpha;
-}
-.content ol:not([type]).is-lower-roman {
-  list-style-type: lower-roman;
-}
-.content ol:not([type]).is-upper-alpha {
-  list-style-type: upper-alpha;
-}
-.content ol:not([type]).is-upper-roman {
-  list-style-type: upper-roman;
-}
-.content ul {
-  list-style: disc outside;
-  margin-left: 2em;
-  margin-top: 1em;
-}
-.content ul ul {
-  list-style-type: circle;
-  margin-top: 0.5em;
-}
-.content ul ul ul {
-  list-style-type: square;
-}
-.content dd {
-  margin-left: 2em;
-}
-.content figure {
-  margin-left: 2em;
-  margin-right: 2em;
-  text-align: center;
-}
-.content figure:not(:first-child) {
-  margin-top: 2em;
-}
-.content figure:not(:last-child) {
-  margin-bottom: 2em;
-}
-.content figure img {
-  display: inline-block;
-}
-.content figure figcaption {
-  font-style: italic;
-}
-.content pre {
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  padding: 1.25em 1.5em;
-  white-space: pre;
-  word-wrap: normal;
-}
-.content sup,
-.content sub {
-  font-size: 75%;
-}
-.content table {
-  width: 100%;
-}
-.content table td,
-.content table th {
-  border: 1px solid hsl(0deg, 0%, 86%);
-  border-width: 0 0 1px;
-  padding: 0.5em 0.75em;
-  vertical-align: top;
-}
-.content table th {
-  color: hsl(0deg, 0%, 21%);
-}
-.content table th:not([align]) {
-  text-align: inherit;
-}
-.content table thead td,
-.content table thead th {
-  border-width: 0 0 2px;
-  color: hsl(0deg, 0%, 21%);
-}
-.content table tfoot td,
-.content table tfoot th {
-  border-width: 2px 0 0;
-  color: hsl(0deg, 0%, 21%);
-}
-.content table tbody tr:last-child td,
-.content table tbody tr:last-child th {
-  border-bottom-width: 0;
-}
-.content .tabs li + li {
-  margin-top: 0;
-}
-.content.is-small {
-  font-size: 0.75rem;
-}
-.content.is-normal {
-  font-size: 1rem;
-}
-.content.is-medium {
-  font-size: 1.25rem;
-}
-.content.is-large {
-  font-size: 1.5rem;
-}
-
 .icon {
   align-items: center;
   display: inline-flex;
@@ -7348,7 +7160,7 @@ a.tag:hover {
 }
 
 .vc-weekday-1, .vc-weekday-7 {
-  color: var(--hg-color-2) !important;
+  color: var(--secondary-color) !important;
 }
 
 .schedules {
@@ -7411,9 +7223,9 @@ a.tag:hover {
   cursor: pointer;
 }
 .button[disabled], .button.disabled, a.button[disabled], a.button.disabled, button.button[disabled], button.button.disabled {
-  background-color: var(--hg-color-grey);
-  color: var(--hg-color-2);
-  border-color: var(--hg-color-2-alpha);
+  background-color: var(--text-color-light);
+  color: var(--secondary-color);
+  border-color: var(--secondary-color-light);
 }
 .button .dropdown-trigger, a.button .dropdown-trigger, button.button .dropdown-trigger {
   border-radius: 1.5em;
@@ -7481,8 +7293,8 @@ a.tag:hover {
   }
 }
 .navbar-item.active, .table tr.is-selected {
-  color: var(--hg-color-2);
-  background-color: var(--hg-color);
+  color: var(--secondary-color);
+  background-color: var(--main-color);
 }
 
 .title {
@@ -7743,15 +7555,6 @@ nav li a, nav li .button {
   border-color: var(--secondary-color-dark) !important;
 }
 
-body {
-  font-size: 1.4em;
-}
-
-@media screen and (max-width: 1380px) {
-  body {
-    font-size: 1em;
-  }
-}
 @media screen and (max-width: 1024px) {
   .page .container {
     margin-left: 1.2rem;
diff --git a/aircox/templates/aircox/base.html b/aircox/templates/aircox/base.html
index da99d52..9d0e447 100644
--- a/aircox/templates/aircox/base.html
+++ b/aircox/templates/aircox/base.html
@@ -39,7 +39,7 @@ Usefull context:
 
         {% block head_extra %}{% endblock %}
     </head>
-    <body>
+    <body {% if request.is_mobile %}class="mobile"{% endif %}>
         <script id="init-script">
             window.addEventListener('load', function() {
                 {% block init-scripts %}
diff --git a/aircox/templates/aircox/basepage_list.html b/aircox/templates/aircox/basepage_list.html
index 2e609f0..cbceea7 100644
--- a/aircox/templates/aircox/basepage_list.html
+++ b/aircox/templates/aircox/basepage_list.html
@@ -15,7 +15,7 @@
 {{ block.super }}
 
 {% block list-container %}
-<section class="container clear-both list list-grid {{ list_class|default:"" }}" role="list">
+<section class="container clear-both list grid {{ list_class|default:"" }}" role="list">
 {% block list %}
 {% with has_headline=True %}
     {% for object in object_list %}
diff --git a/aircox/templates/aircox/home.html b/aircox/templates/aircox/home.html
index 4babb16..57d1d19 100644
--- a/aircox/templates/aircox/home.html
+++ b/aircox/templates/aircox/home.html
@@ -41,7 +41,7 @@
 <section class="container">
     <h2 class="title">{% translate "It just happened" %}</h2>
 
-    <div class="list-grid" role="list">
+    <div class="grid" role="list">
         {% include "./widgets/logs.html" with object_list=logs %}
     </div>
 
diff --git a/aircox/templates/aircox/timetable_list.html b/aircox/templates/aircox/timetable_list.html
index 3d5f365..77c55b9 100644
--- a/aircox/templates/aircox/timetable_list.html
+++ b/aircox/templates/aircox/timetable_list.html
@@ -18,7 +18,7 @@
 
 
 {% block list-container %}
-{% with list_class="list-grid" %}
+{% with list_class="grid" %}
 {{ block.super }}
 {% endwith %}
 {% endblock %}
diff --git a/aircox/templates/aircox/widgets/carousel.html b/aircox/templates/aircox/widgets/carousel.html
index 27720f3..a25e18a 100644
--- a/aircox/templates/aircox/widgets/carousel.html
+++ b/aircox/templates/aircox/widgets/carousel.html
@@ -7,7 +7,7 @@ Context:
 - url_label: label of url button
 {% endcomment %}
 
-<a-carousel section-class="card-grid">
+<a-carousel>
     {% for object in objects %}
     {% page_widget "card" object %}
     {% endfor %}
diff --git a/aircox/templates/aircox/widgets/player.html b/aircox/templates/aircox/widgets/player.html
index 0633a41..7d2f5d1 100644
--- a/aircox/templates/aircox/widgets/player.html
+++ b/aircox/templates/aircox/widgets/player.html
@@ -30,7 +30,7 @@ The audio player
             </h4>
             <h4 v-else-if="current && current.data.type == 'track'"
                 class="title" aria-description="{% translate "Track currently on air" %}">
-                <span class="icon hg-color-2 mr-3">
+                <span class="icon secondary-color mr-3">
                     <i class="fas fa-music"></i>
                 </span>
                 <span>[[ current.data.title ]]</span>
diff --git a/aircox/templates/aircox/widgets/track_item.html b/aircox/templates/aircox/widgets/track_item.html
index 62442a6..20ab4d2 100644
--- a/aircox/templates/aircox/widgets/track_item.html
+++ b/aircox/templates/aircox/widgets/track_item.html
@@ -6,7 +6,7 @@ Context:
 {% endcomment %}
 
 <span class="track">
-    <span class="icon hg-color-2">
+    <span class="icon secondary-color">
         <i class="fas fa-music"></i>
     </span>
     <label>
diff --git a/assets/src/assets/common.scss b/assets/src/assets/common.scss
index d419e6c..fad9a46 100644
--- a/assets/src/assets/common.scss
+++ b/assets/src/assets/common.scss
@@ -30,13 +30,6 @@ input.half-field:not(:active):not(:hover) {
     --link-fg: #00A6A6;
     --link-hv-fg: var(--text-color);
 
-    --hg-color: #EFCA08;
-    --hg-color-alpha: #EFCA08B3;
-    --hg-color-grey: rgba(230, 230, 60, 1);
-    --hg-color-2: #F49F0A;
-    --hg-color-2-alpha: #F49F0AB3;
-    --hg-color-2-grey: rgba(50, 200, 200, 1);
-
     --nav-primary-height: 3rem;
     --nav-secondary-height: 2.5rem;
     --nav-fg: var(--text-color);
@@ -51,22 +44,38 @@ input.half-field:not(:active):not(:hover) {
 }
 
 
+:root {
+    font-size: 14px;
+}
+
 body {
-    font-size: 1.4em;
     background-color: var(--body-bg);
 }
 
 
-@media screen and (max-width: v.$screen-wider) {
-    body { font-size: 1.2em; }
+@mixin mobile-small {
+    .grid { @include grid-1; }
+}
+
+
+body.mobile {
+    @include mobile-small;
+}
+
+@media screen and (max-width: v.$screen-smaller) {
+    @include mobile-small;
 }
 
 @media screen and (max-width: v.$screen-normal) {
-    body { font-size: 1em; }
+    html { font-size: 18px !important; }
+}
 
-    :root {
-        --header-height: 20rem;
-    }
+@media screen and (max-width: v.$screen-wider) {
+    html { font-size: 20px !important; }
+}
+
+@media screen and (min-width: v.$screen-wider) {
+    html { font-size: 24px !important; }
 }
 
 h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss
index 40d5368..9182200 100644
--- a/assets/src/assets/components.scss
+++ b/assets/src/assets/components.scss
@@ -31,8 +31,8 @@
     --preview-cover-size: 14rem;
     --preview-cover-small-size: 10rem;
     --preview-cover-tiny-size: 4rem;
-    --preview-wide-content-sz: #{v.$text-size-bigger};
-    --preview-heading-bg-color: var(--hg-color);
+    --preview-wide-content-sz: #{v.$text-size-2};
+    --preview-heading-bg-color: var(--main-color);
     --header-height: var(--cover-h);
 
     --a-carousel-p: #{v.$text-size-medium};
@@ -89,9 +89,9 @@
 
         --section-content-sz: 1rem;
 
-        --preview-title-sz: #{v.$text-size};
-        --preview-subtitle-sz: #{v.$text-size-smaller};
-        --preview-wide-content-sz: #{v.$text-size};
+        // --preview-title-sz: #{v.$text-size};
+        // --preview-subtitle-sz: #{v.$text-size-smaller};
+        // --preview-wide-content-sz: #{v.$text-size};
     }
 }
 
@@ -177,7 +177,6 @@
         }
 
         &.active:not(:hover) {
-            // border-color: var(--hg-color-alpha);
             color: var(--button-active-fg);
             background-color: var(--button-active-bg);
         }
@@ -187,9 +186,9 @@
         }
 
         &[disabled], &.disabled {
-            background-color: var(--hg-color-grey);
-            color: var(--hg-color-2);
-            border-color: var(--hg-color-2-alpha);
+            background-color: var(--text-color-light);
+            color: var(--secondary-color);
+            border-color: var(--secondary-color-light);
         }
 
         .dropdown-trigger {
@@ -414,7 +413,8 @@
 
     &:hover {
         figure {
-            box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+            // box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
+            box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
         }
 
         a {
@@ -429,10 +429,6 @@
             display: block !important;
         }
 
-        .title {
-            overflow: hidden;
-        }
-
         .subtitle {
             font-size: v.$text-size-2;
         }
@@ -443,7 +439,7 @@
         position: relative;
 
         figure {
-            box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
+            // box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
             height: var(--cover-h);
             width: var(--cover-w);
         }
@@ -459,25 +455,6 @@
 }
 
 
-// ---- grid
-.list-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-flow: dense;
-    gap: v.$mp-4;
-
-    // .grid-wide { grid-column: 1 / 3; }
-}
-
-
-@media screen and (max-width: v.$screen-smaller) {
-    .list-grid {
-        grid-template-columns: 1fr;
-        // .grid-wide { grid-column: 1; }
-    }
-}
-
-
 // ---- ---- Carousel
 .a-carousel {
     .a-carousel-viewport {
diff --git a/assets/src/assets/helpers.scss b/assets/src/assets/helpers.scss
index 26ae4f1..cded0d8 100644
--- a/assets/src/assets/helpers.scss
+++ b/assets/src/assets/helpers.scss
@@ -1,5 +1,6 @@
-@use "./vars";
+@use "./vars" as v;
 
+// ---- layout
 .align-left { text-align: left; justify-content: left; }
 .align-right { text-align: right; justify-content: right; }
 
@@ -11,13 +12,31 @@
 .d-block { display: block !important; }
 .d-inline-block { display: inline-block !important; }
 
-.push-right, .flex-push-right { margin-left: auto !important; }
-.push-bottom { margin-top: auto !important; }
+.p-relative { position: relative !important }
+.p-absolute { position: absolute !important }
+.p-fixed { position: fixed !important }
+.p-sticky { position: sticky !important }
+.p-static { position: static !important }
 
+.ws-nowrap { white-space: nowrap; }
 
-.grid-2 { display: grid; grid-template-columns: 1fr 1fr }
-.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr }
+// ---- grid
+@mixin grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: dense;
+    gap: v.$mp-4;
+}
+@mixin grid-1 { grid-template-columns: 1fr; }
+@mixin grid-2 { grid-template-columns: 1fr 1fr; }
+@mixin grid-3 { grid-template-columns: 1fr 1fr 1fr; }
 
+.grid { @include grid; }
+.grid-1 { @include grid; @include grid-1; }
+.grid-2 { @include grid; @include grid-2; }
+.grid-3 { @include grid; @include grid-3; }
+
+// ---- flex
 .flex-row { display: flex; flex-direction: row }
 .flex-column { display: flex; flex-direction: column }
 .flex-grow-0 { flex-grow: 0 !important; }
@@ -26,6 +45,7 @@
 .float-right { float: right }
 .float-left { float: left }
 
+// ---- boxing
 .is-fullwidth { width: 100%; }
 .is-fullheight { height: 100%; }
 .is-fixed-bottom {
@@ -34,23 +54,13 @@
     margin-bottom: 0px;
     border-radius: 0;
 }
-.is-borderless { border: none; }
+.no-border { border: 0px !important; }
 
 .overflow-hidden { overflow: hidden }
 .overflow-hidden.is-fullwidth { max-width: 100%; }
 
-.p-relative { position: relative !important }
-.p-absolute { position: absolute !important }
-.p-fixed { position: fixed !important }
-.p-sticky { position: sticky !important }
-.p-static { position: static !important }
-
 .height-full { height: 100%; }
 
-.ws-nowrap { white-space: nowrap; }
-.no-border { border: 0px !important; }
-
-
 *[draggable="true"] {
     cursor: move;
 }
@@ -67,16 +77,16 @@
 
 
 // -- colors
-.hg-color { color: var(--highlight-color); }
-.hg-color-2 { color: var(--highlight-color-2); }
+.main-color { color: var(--main-color); }
+.secondary-color { color: var(--secondary-color); }
 
 .bg-transparent { background-color: transparent; }
 
 .is-success {
-    background-color: vars.$green !important;
-    border-color: vars.$green-dark !important;
+    background-color: v.$green !important;
+    border-color: v.$green-dark !important;
 }
 .is-danger {
-    background-color: vars.$red !important;
-    border-color: vars.$red-dark !important;
+    background-color: v.$red !important;
+    border-color: v.$red-dark !important;
 }
diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss
index a62da25..24e05d6 100644
--- a/assets/src/assets/public.scss
+++ b/assets/src/assets/public.scss
@@ -47,7 +47,7 @@
 }
 
 .vc-weekday-1, .vc-weekday-7 {
-    color: var(--hg-color-2) !important;
+    color: var(--secondary-color) !important;
 }
 
 
@@ -124,19 +124,15 @@
 }
 
 .navbar-item.active, .table tr.is-selected {
-    color: var(--hg-color-2);
-    background-color: var(--hg-color);
+    color: var(--secondary-color);
+    background-color: var(--main-color);
 }
 
 
 // -- headings
 .title {
     text-transform: uppercase;
-
-    &.is-3 {
-        margin-top: v.$mp-3;
-    }
-
+    &.is-3 { margin-top: v.$mp-3; }
 }
 
 
@@ -467,12 +463,6 @@ nav li {
 
 
 // ---- responsive
-body { font-size: 1.4em; }
-
-@media screen and (max-width: v.$screen-wide) {
-    body { font-size: 1em; }
-}
-
 @media screen and (max-width: v.$screen-normal) {
     .page .container {
         margin-left: v.$mp-4;
@@ -485,5 +475,4 @@ body { font-size: 1.4em; }
         margin-left: v.$mp-2;
         margin-right: v.$mp-2;
     }
-
 }
diff --git a/assets/src/assets/vendor.scss b/assets/src/assets/vendor.scss
index 70f56ff..a2c309b 100644
--- a/assets/src/assets/vendor.scss
+++ b/assets/src/assets/vendor.scss
@@ -23,7 +23,7 @@ $title-color: #000;
 @import "~bulma/sass/elements/box";
 // @import "~bulma/sass/elements/button";
 @import "~bulma/sass/elements/container";
-@import "~bulma/sass/elements/content";
+// @import "~bulma/sass/elements/content";
 @import "~bulma/sass/elements/icon";
 // @import "~bulma/sass/elements/image";
 // @import "~bulma/sass/elements/notification";