diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css
index e9fca1f..1f4b425 100644
--- a/aircox/static/aircox/css/admin.css
+++ b/aircox/static/aircox/css/admin.css
@@ -7,10 +7,13 @@
   --heading-bg-color: var(--highlight-color);
   --heading-bg-highlight-color: var(--highlight-color-2);
   --heading-font-family: default;
+  --preview-title-sz: 1.6rem;
+  --preview-subtitle-sz: 1.4rem;
   --preview-cover-size: 24rem;
   --preview-cover-small-size: 10rem;
   --preview-cover-tiny-size: 4rem;
-  --header-height: 30rem;
+  --preview-wide-content-sz: 1.6rem;
+  --header-height: var(--preview-cover-size);
   --a-carousel-pb: 1.4rem;
   --a-carousel-gap: 1.2rem;
   --a-carousel-nav-x: -0.6em;
@@ -38,6 +41,37 @@
   --button-active-bg: var(--highlight-color-2);
 }
 
+@media screen and (max-width: 1380px) {
+  :root {
+    --section-content-sz: 1rem;
+    --preview-title-sz: 1rem;
+    --preview-subtitle-sz: 1rem;
+    --preview-cover-size: 14rem;
+    --preview-cover-small-size: 10rem;
+    --preview-cover-tiny-size: 4rem;
+    --preview-wide-content-sz: 1rem;
+  }
+}
+.title.is-1 {
+  font-size: var(--title-1-sz);
+}
+.title.is-2 {
+  font-size: var(--title-2-sz);
+}
+.title.is-3 {
+  font-size: var(--title-3-sz);
+}
+
+.subtitle.is-1 {
+  font-size: var(--title-1-sz);
+}
+.subtitle.is-2 {
+  font-size: var(--title-2-sz);
+}
+.subtitle.is-3 {
+  font-size: var(--title-3-sz);
+}
+
 .heading {
   display: inline-block;
 }
@@ -72,12 +106,12 @@
 }
 .preview .title, .preview .title:not(:last-child) {
   font-weight: 700;
-  font-size: 1.6rem;
+  font-size: var(--preview-title-sz);
   margin-bottom: unset;
 }
 .preview .subtitle {
   font-weight: 500;
-  font-size: 1.6rem;
+  font-size: var(--preview-subtitle-sz);
   margin-bottom: unset;
 }
 .preview .headings {
@@ -101,11 +135,6 @@
     display: none;
   }
 }
-@media screen and (max-width: 1380px) {
-  :root {
-    --preview-cover-size: 18em;
-  }
-}
 .preview-cover {
   background-size: cover;
   background-color: transparent !important;
@@ -145,13 +174,6 @@
   height: 100%;
 }
 
-.preview.comment .title {
-  font-size: 1.6rem;
-}
-.preview.comment .subtitle {
-  font-size: 1rem;
-}
-
 .list-item {
   width: 100%;
 }
@@ -203,11 +225,12 @@
   margin-right: 1.2rem;
 }
 .preview-wide .content {
-  font-size: 1.6rem;
+  font-size: var(--preview-wide-content-sz);
   flex-grow: 1;
 }
 
 .preview-card {
+  padding: 0rem !important;
   height: var(--preview-cover-size);
   width: var(--preview-cover-size);
 }
@@ -226,30 +249,31 @@
   display: none;
 }
 
-.preview-card-headings {
+.card-headings, .preview-card-headings {
   padding-top: 0.6rem;
 }
-.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
+.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
   margin-bottom: 0.6rem;
 }
-preview-header:not(.no-cover) .preview-card-headings .heading {
+preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading {
   margin-bottom: 0.6rem;
 }
 
 .header.preview-header {
-  display: flex;
   align-items: start;
   gap: 0.6rem;
   min-height: unset;
   padding-top: 0.6rem !important;
 }
-.header.preview-header .headings {
+.header .headings {
+  width: unset;
   flex-grow: 1;
   padding-top: 0 !important;
+  display: flex;
+  flex-direction: column;
 }
-.header img {
-  height: var(--preview-cover-size);
-  max-width: calc(var(--preview-cover-size) * 2);
+.header.has-cover {
+  min-height: calc(var(--header-height) / 2);
 }
 .header .title {
   font-size: 40px;
@@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   font-size: 32px;
 }
 
+.header-cover:not(:only-child) {
+  float: right;
+  height: var(--header-height);
+  max-width: calc(var(--header-height) * 2);
+  margin: 0 0 1.2rem 1.2rem;
+}
+
+.header-cover:only-child {
+  with: 100%;
+}
+
+@media screen and (max-width: 600px) {
+  .container.header {
+    width: 100%;
+  }
+  .container.header .headings {
+    width: 100%;
+    clear: both;
+  }
+  .container.header .header-cover {
+    float: none;
+    width: 100%;
+    max-width: unset;
+    height: unset;
+    margin-left: 0rem;
+    margin-right: 0rem;
+  }
+}
 .card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css
index 5a241ef..8c86ed9 100644
--- a/aircox/static/aircox/css/chunk-common.css
+++ b/aircox/static/aircox/css/chunk-common.css
@@ -304,7 +304,7 @@ pre {
 }
 
 body {
-  color: hsl(0deg, 0%, 29%);
+  color: #000;
   font-size: 1em;
   font-weight: 400;
   line-height: 1.5;
@@ -6820,7 +6820,7 @@ a.tag:hover {
 }
 
 .title {
-  color: hsl(0deg, 0%, 21%);
+  color: #000;
   font-size: 2rem;
   font-weight: 600;
   line-height: 1.125;
@@ -6899,6 +6899,18 @@ a.tag:hover {
   justify-content: right;
 }
 
+.clear-left {
+  clear: left !important;
+}
+
+.clear-right {
+  clear: right !important;
+}
+
+.clear-both {
+  clear: both !important;
+}
+
 .d-inline {
   display: inline !important;
 }
@@ -6911,8 +6923,12 @@ a.tag:hover {
   display: inline-block !important;
 }
 
-.flex-push-right {
-  margin-left: auto;
+.push-right, .flex-push-right {
+  margin-left: auto !important;
+}
+
+.push-bottom {
+  margin-top: auto !important;
 }
 
 .flex-grow-0 {
@@ -7028,459 +7044,6 @@ a.tag:hover {
   border-color: #b00 !important;
 }
 
-:root {
-  --heading-height: 30rem;
-  --heading-title-bg-color: rgba(255, 255, 0, 1);
-  --heading-bg-color: var(--highlight-color);
-  --heading-bg-highlight-color: var(--highlight-color-2);
-  --heading-font-family: default;
-  --preview-cover-size: 24rem;
-  --preview-cover-small-size: 10rem;
-  --preview-cover-tiny-size: 4rem;
-  --header-height: 30rem;
-  --a-carousel-pb: 1.4rem;
-  --a-carousel-gap: 1.2rem;
-  --a-carousel-nav-x: -0.6em;
-  --a-progress-bg: transparent;
-  --a-progress-bar-bg: var(--highlight-color-2);
-  --a-progress-bar-color: var(--highlight-color);
-  --a-progress-bar-pd: 0.4rem;
-  --a-playlist-title-sz: 1rem;
-  --a-playlist-title-pd: 0.6rem;
-  --a-playlist-item-border: 1px var(--highlight-color-2) solid;
-  --a-sound-bg: var(--highlight-color-alpha);
-  --a-sound-hv-bg: var(--highlight-color);
-  --a-sound-playing-fg: var(--highlight-color-alpha);
-  --a-sound-hv-fg: var(--highlight-color-2);
-  --a-sound-title-sz: 1.4rem;
-  --a-player-url-fg: var(--highlight-color-2);
-  --a-player-panel-bg: var(--highlight-color);
-  --a-player-bar-bg: var(--highlight-color);
-  --a-player-bar-title-alone-sz: 1.6rem;
-  --button-fg: var(--text-color);
-  --button-bg: var(--highlight-color);
-  --button-hg-fg: var(--highlight-color-2);
-  --button-hg-bg: var(--highlight-color);
-  --button-active-fg: var(--highlight-color);
-  --button-active-bg: var(--highlight-color-2);
-}
-
-.heading {
-  display: inline-block;
-}
-.heading:not(:empty) {
-  background-color: var(--heading-bg-color);
-  padding: 0.4rem;
-  margin-top: 0em !important;
-  vertical-align: top;
-}
-.heading:not(:empty).highlight, .heading:not(:empty).active, .preview.active .heading:not(:empty) {
-  background-color: var(--heading-bg-highlight-color);
-  color: var(--highlight-color);
-}
-.heading.title {
-  background-color: var(--heading-title-bg-color);
-}
-
-.preview {
-  position: relative;
-  background-size: cover;
-  margin-bottom: 2rem !important;
-}
-.preview.preview-item {
-  width: 100%;
-}
-.preview.columns, .preview .headings.columns {
-  margin-left: 0em;
-  margin-right: 0em;
-}
-.preview.columns .column, .preview .headings.columns .column {
-  padding: 0em;
-}
-.preview .title, .preview .title:not(:last-child) {
-  font-weight: 700;
-  font-size: 1.6rem;
-  margin-bottom: unset;
-}
-.preview .subtitle {
-  font-weight: 500;
-  font-size: 1.6rem;
-  margin-bottom: unset;
-}
-.preview .headings {
-  background-size: cover;
-}
-.preview .headings > * {
-  margin: 0em;
-}
-.preview .headings .column {
-  padding: 0em;
-}
-.preview .headings a {
-  color: var(--text-color);
-}
-.preview.tiny .content {
-  font-size: 1rem;
-}
-
-@media screen and (max-width: 600px) {
-  .preview .content {
-    display: none;
-  }
-}
-@media screen and (max-width: 1380px) {
-  :root {
-    --preview-cover-size: 18em;
-  }
-}
-.preview-cover {
-  background-size: cover;
-  background-color: transparent !important;
-  height: var(--preview-cover-size);
-  width: var(--preview-cover-size);
-  min-width: var(--preview-cover-size);
-}
-.preview-cover.small, .preview.small .preview-cover {
-  min-width: unset;
-  height: var(--preview-cover-small-size);
-  width: var(--preview-cover-small-size) !important;
-  min-width: var(--preview-cover-small-size);
-}
-.preview-cover.tiny, .preview.tiny .preview-cover {
-  min-width: unset;
-  height: var(--preview-cover-tiny-size);
-  width: var(--preview-cover-tiny-size) !important;
-  min-width: var(--preview-cover-tiny-size);
-}
-
-.preview-header {
-  width: 100%;
-}
-.preview-header:not(.no-cover) {
-  min-height: var(--header-height);
-}
-.preview-header.no-cover {
-  height: unset;
-}
-.preview-header .headings {
-  padding-top: 2rem;
-}
-.preview-header .headings, .preview-header > .container {
-  width: 100%;
-}
-.preview-header > .container {
-  height: 100%;
-}
-
-.preview.comment .title {
-  font-size: 1.6rem;
-}
-.preview.comment .subtitle {
-  font-size: 1rem;
-}
-
-.list-item {
-  width: 100%;
-}
-.list-item:not(:first-child) {
-  margin-top: 0.6rem;
-}
-.list-item .headings {
-  display: flex;
-  flex-direction: row;
-  padding-top: 0em;
-  margin-bottom: 1.2rem !important;
-}
-.list-item .headings .title {
-  flex-grow: 1;
-}
-.list-item .subtitle {
-  text-align: right;
-}
-.list-item .media-content {
-  display: flex;
-  flex-direction: column;
-}
-.list-item:not(.no-cover) .list-item .media-content {
-  min-height: var(--preview-cover-small-size);
-}
-.list-item .media-content .content {
-  flex-grow: 1;
-  margin-bottom: auto;
-}
-.list-item .media-content .actions {
-  flex-grow: unset;
-  text-align: right;
-  margin-top: auto;
-}
-
-.preview-wide {
-  height: var(--preview-cover-size);
-}
-.preview-wide .headings {
-  height: var(--preview-cover-size);
-}
-.preview-wide:not(.header) .headings {
-  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
-}
-.preview-wide .headings {
-  width: var(--preview-cover-size);
-  min-width: var(--preview-cover-size);
-  flex-grow: 0;
-  margin-right: 1.2rem;
-}
-.preview-wide .content {
-  font-size: 1.6rem;
-  flex-grow: 1;
-}
-
-.preview-card {
-  height: var(--preview-cover-size);
-  width: var(--preview-cover-size);
-}
-.preview-card:not(.header) {
-  box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
-}
-.card-grid .preview-card {
-  min-width: unset;
-}
-.preview-card .actions {
-  position: absolute;
-  bottom: 0.6rem;
-  right: 0.6rem;
-}
-.preview-card .actions label {
-  display: none;
-}
-
-.preview-card-headings {
-  padding-top: 0.6rem;
-}
-.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
-  margin-bottom: 0.6rem;
-}
-preview-header:not(.no-cover) .preview-card-headings .heading {
-  margin-bottom: 0.6rem;
-}
-
-.header.preview-header {
-  display: flex;
-  align-items: start;
-  gap: 0.6rem;
-  min-height: unset;
-  padding-top: 0.6rem !important;
-}
-.header.preview-header .headings {
-  flex-grow: 1;
-  padding-top: 0 !important;
-}
-.header img {
-  height: var(--preview-cover-size);
-  max-width: calc(var(--preview-cover-size) * 2);
-}
-.header .title {
-  font-size: 40px;
-}
-.header .subtitle {
-  font-size: 32px;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 1.2rem;
-}
-
-.a-carousel {
-  padding-bottom: var(--a-carousel-pb);
-}
-
-.a-carousel-container {
-  width: 100%;
-  gap: var(--a-carousel-gap);
-  transition: margin-left 1s;
-}
-.a-carousel-container > * {
-  flex-shrink: 0;
-}
-
-.a-carousel-button-container button, .a-carousel-button-container .button {
-  z-index: 1000;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  top: 50%;
-}
-.a-carousel-button-container button.prev, .a-carousel-button-container .button.prev {
-  left: var(--a-carousel-nav-x);
-}
-.a-carousel-button-container button.next, .a-carousel-button-container .button.next {
-  right: var(--a-carousel-nav-x);
-}
-
-.a-progress {
-  display: flex;
-  flex-direction: row;
-  margin: 0em;
-  padding: 0em;
-}
-.a-progress:hover {
-  background-color: var(--a-progress-bg);
-}
-.a-progress .a-progress-bar-container {
-  flex-grow: 1;
-  margin: 0em;
-}
-.a-progress > time, .a-progress .a-progress-bar {
-  height: 100%;
-  padding: var(--a-progress-bar-pd);
-}
-.a-progress .a-progress-bar {
-  background-color: var(--a-progress-bar-bg);
-  color: var(--a-progress-bar-color);
-}
-
-.playlist .header, .a-playlist .header {
-  display: flex;
-  flex-direction: row;
-}
-.playlist .title, .a-playlist .title {
-  font-size: var(--a-playlist-title-sz);
-  margin: 0;
-  padding: var(--a-playlist-title-pd);
-}
-.playlist li, .a-playlist li {
-  list-style: none;
-  border-bottom: var(--a-playlist-item-border);
-}
-.playlist li:last-child, .a-playlist li:last-child {
-  border-bottom: 0px;
-}
-
-.a-sound-item {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  height: 3rem;
-  background-color: var(--a-sound-bg);
-}
-.a-sound-item.playing, .a-sound-item.playing .title {
-  color: var(--a-sound-playing-fg) !important;
-}
-.a-sound-item:hover {
-  background-color: var(--a-sound-hv-bg);
-}
-.a-sound-item:hover .title {
-  color: var(--a-sound-hv-fg) !important;
-}
-.a-sound-item .title:hover::before, .a-sound-item.playing .title::before {
-  content: "\f04b";
-  font-family: "Font Awesome 6 Free";
-  margin-right: 0.6em;
-}
-.a-sound-item.playing .title:hover::before {
-  content: "";
-  margin: 0;
-}
-.a-sound-item .title {
-  cursor: pointer;
-  margin: 0em;
-  padding: 0.6em;
-  font-size: var(--a-sound-title-sz);
-}
-.a-sound-item .title .icon {
-  padding: 0em 0.6rem;
-}
-.a-sound-item .button {
-  width: 3em;
-}
-
-.player-container {
-  z-index: 1000000;
-}
-
-.a-player {
-  box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);
-}
-.a-player a {
-  color: var(--a-player-url-fg);
-}
-
-.a-player-panels {
-  background: var(--a-player-panel-bg);
-  height: 0%;
-  transition: height 1s;
-}
-
-.a-player-panels.is-open {
-  height: auto;
-}
-
-.a-player-panel {
-  padding-bottom: 0.6rem;
-  max-height: 80%;
-  overflow-y: auto;
-}
-.a-player-panel .a-sound-item:not(:hover) {
-  background-color: transparent;
-}
-
-.a-player-progress {
-  height: 0.4em;
-  overflow: hidden;
-}
-.a-player-progress time {
-  display: none;
-}
-.a-player-progress:hover, .a-player-panels.is-open + .a-player-progress {
-  background: var(--a-player-bar-bg);
-  height: 2em;
-}
-.a-player-progress:hover time, .a-player-panels.is-open + .a-player-progress time {
-  display: unset;
-}
-
-.a-player-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  height: 3.75em !important;
-  border-top: 1px #ddd solid;
-  background: var(--a-player-bar-bg);
-}
-.a-player-bar > * {
-  height: 100%;
-}
-.a-player-bar .cover {
-  height: 100%;
-}
-.a-player-bar .title {
-  font-size: 1rem;
-  margin: 0em;
-}
-.a-player-bar .title:last-child {
-  font-size: var(--a-player-bar-title-alone-sz);
-}
-.a-player-bar .button {
-  font-size: 1.6rem;
-  height: 100%;
-  padding: auto 0.2em !important;
-  min-width: 3em;
-  border-radius: 0px;
-  transition: background-color 0.5s;
-}
-.a-player-bar .button.open {
-  background-color: var(--highlight-color-2-alpha);
-  color: var(--highlight-color);
-}
-
-.a-player-bar-content {
-  flex-grow: 1;
-  padding-top: 0.6rem;
-  padding-left: 0.6rem;
-  padding-right: 0.6rem;
-}
-
 input.half-field:not(:active):not(:hover) {
   border: none;
   background-color: rgba(0, 0, 0, 0);
diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css
index d6ca655..3cb24be 100644
--- a/aircox/static/aircox/css/public.css
+++ b/aircox/static/aircox/css/public.css
@@ -7,10 +7,13 @@
   --heading-bg-color: var(--highlight-color);
   --heading-bg-highlight-color: var(--highlight-color-2);
   --heading-font-family: default;
+  --preview-title-sz: 1.6rem;
+  --preview-subtitle-sz: 1.4rem;
   --preview-cover-size: 24rem;
   --preview-cover-small-size: 10rem;
   --preview-cover-tiny-size: 4rem;
-  --header-height: 30rem;
+  --preview-wide-content-sz: 1.6rem;
+  --header-height: var(--preview-cover-size);
   --a-carousel-pb: 1.4rem;
   --a-carousel-gap: 1.2rem;
   --a-carousel-nav-x: -0.6em;
@@ -38,6 +41,37 @@
   --button-active-bg: var(--highlight-color-2);
 }
 
+@media screen and (max-width: 1380px) {
+  :root {
+    --section-content-sz: 1rem;
+    --preview-title-sz: 1rem;
+    --preview-subtitle-sz: 1rem;
+    --preview-cover-size: 14rem;
+    --preview-cover-small-size: 10rem;
+    --preview-cover-tiny-size: 4rem;
+    --preview-wide-content-sz: 1rem;
+  }
+}
+.title.is-1 {
+  font-size: var(--title-1-sz);
+}
+.title.is-2 {
+  font-size: var(--title-2-sz);
+}
+.title.is-3 {
+  font-size: var(--title-3-sz);
+}
+
+.subtitle.is-1 {
+  font-size: var(--title-1-sz);
+}
+.subtitle.is-2 {
+  font-size: var(--title-2-sz);
+}
+.subtitle.is-3 {
+  font-size: var(--title-3-sz);
+}
+
 .heading {
   display: inline-block;
 }
@@ -72,12 +106,12 @@
 }
 .preview .title, .preview .title:not(:last-child) {
   font-weight: 700;
-  font-size: 1.6rem;
+  font-size: var(--preview-title-sz);
   margin-bottom: unset;
 }
 .preview .subtitle {
   font-weight: 500;
-  font-size: 1.6rem;
+  font-size: var(--preview-subtitle-sz);
   margin-bottom: unset;
 }
 .preview .headings {
@@ -101,11 +135,6 @@
     display: none;
   }
 }
-@media screen and (max-width: 1380px) {
-  :root {
-    --preview-cover-size: 18em;
-  }
-}
 .preview-cover {
   background-size: cover;
   background-color: transparent !important;
@@ -145,13 +174,6 @@
   height: 100%;
 }
 
-.preview.comment .title {
-  font-size: 1.6rem;
-}
-.preview.comment .subtitle {
-  font-size: 1rem;
-}
-
 .list-item {
   width: 100%;
 }
@@ -203,11 +225,12 @@
   margin-right: 1.2rem;
 }
 .preview-wide .content {
-  font-size: 1.6rem;
+  font-size: var(--preview-wide-content-sz);
   flex-grow: 1;
 }
 
 .preview-card {
+  padding: 0rem !important;
   height: var(--preview-cover-size);
   width: var(--preview-cover-size);
 }
@@ -226,30 +249,31 @@
   display: none;
 }
 
-.preview-card-headings {
+.card-headings, .preview-card-headings {
   padding-top: 0.6rem;
 }
-.preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
+.card-headings > div:not(:last-child), .card-headings .column > div, .preview-card-headings > div:not(:last-child), .preview-card-headings .column > div {
   margin-bottom: 0.6rem;
 }
-preview-header:not(.no-cover) .preview-card-headings .heading {
+preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-cover) .preview-card-headings .heading {
   margin-bottom: 0.6rem;
 }
 
 .header.preview-header {
-  display: flex;
   align-items: start;
   gap: 0.6rem;
   min-height: unset;
   padding-top: 0.6rem !important;
 }
-.header.preview-header .headings {
+.header .headings {
+  width: unset;
   flex-grow: 1;
   padding-top: 0 !important;
+  display: flex;
+  flex-direction: column;
 }
-.header img {
-  height: var(--preview-cover-size);
-  max-width: calc(var(--preview-cover-size) * 2);
+.header.has-cover {
+  min-height: calc(var(--header-height) / 2);
 }
 .header .title {
   font-size: 40px;
@@ -258,6 +282,34 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   font-size: 32px;
 }
 
+.header-cover:not(:only-child) {
+  float: right;
+  height: var(--header-height);
+  max-width: calc(var(--header-height) * 2);
+  margin: 0 0 1.2rem 1.2rem;
+}
+
+.header-cover:only-child {
+  with: 100%;
+}
+
+@media screen and (max-width: 600px) {
+  .container.header {
+    width: 100%;
+  }
+  .container.header .headings {
+    width: 100%;
+    clear: both;
+  }
+  .container.header .header-cover {
+    float: none;
+    width: 100%;
+    max-width: unset;
+    height: unset;
+    margin-left: 0rem;
+    margin-right: 0rem;
+  }
+}
 .card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -735,7 +787,7 @@ pre {
 }
 
 body {
-  color: hsl(0deg, 0%, 29%);
+  color: #000;
   font-size: 1em;
   font-weight: 400;
   line-height: 1.5;
@@ -7251,7 +7303,7 @@ a.tag:hover {
 }
 
 .title {
-  color: hsl(0deg, 0%, 21%);
+  color: #000;
   font-size: 2rem;
   font-weight: 600;
   line-height: 1.125;
@@ -7351,12 +7403,14 @@ a.tag:hover {
 }
 
 .schedules {
-  margin: 0;
   padding-top: 0;
+  margin-bottom: -0.6rem !important;
 }
 
 .schedule {
-  margin-bottom: 0.4rem;
+  display: inline-block;
+  margin: 0.6rem;
+  margin-left: 0rem;
 }
 .schedule .day {
   font-weight: 700;
@@ -7591,7 +7645,6 @@ nav li a, nav li .button {
   flex-direction: row;
   margin-top: 0.6rem;
   text-align: right;
-  font-size: 1.4rem;
 }
 .nav-urls > a:only-child {
   margin-left: auto;
@@ -7618,18 +7671,80 @@ nav li a, nav li .button {
   text-align: right;
 }
 
+.header.preview-header {
+  align-items: start;
+  gap: 0.6rem;
+  min-height: unset;
+  padding-top: 0.6rem !important;
+}
+.header .headings {
+  width: unset;
+  flex-grow: 1;
+  padding-top: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+.header.has-cover {
+  min-height: calc(var(--header-height) / 2);
+}
+.header .title {
+  font-size: 40px;
+}
+.header .subtitle {
+  font-size: 32px;
+}
+
+.header-cover:not(:only-child) {
+  float: right;
+  height: var(--header-height);
+  max-width: calc(var(--header-height) * 2);
+  margin: 0 0 1.2rem 1.2rem;
+}
+
+.header-cover:only-child {
+  with: 100%;
+}
+
 .page-content {
   margin-top: 2rem;
+}
+.page-content:not(:last-child) {
   margin-bottom: 2rem;
 }
 
-@media screen and (max-width: 1024px) {
-  .container.header {
-    margin-right: 0 !important;
-    margin-left: 0 !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;
     margin-right: 1.2rem;
   }
 }
+@media screen and (max-width: 600px) {
+  .page .container {
+    margin-left: 0.4rem;
+    margin-right: 0.4rem;
+  }
+  .container.header {
+    width: calc(100% - 0.4rem);
+  }
+  .container.header .headings {
+    width: 100%;
+    clear: both;
+  }
+  .container.header .header-cover {
+    float: none;
+    width: 100%;
+    max-width: unset;
+    height: unset;
+    margin-left: 0rem;
+    margin-right: 0rem;
+  }
+}
diff --git a/aircox/templates/aircox/base.html b/aircox/templates/aircox/base.html
index 0adb4d6..ade4a3b 100644
--- a/aircox/templates/aircox/base.html
+++ b/aircox/templates/aircox/base.html
@@ -82,35 +82,48 @@ Usefull context:
             {% block main-container %}
             <main class="page">
             {% block main %}
+                {% block header-container %}
                 <header class="container header preview preview-header {% if cover %}has-cover{% endif %}">
-                {% block header %}
-                <div class="headings preview-card-headings">
+                    {% block header %}
+                    {% if cover %}
+                    <img src="{{ cover }}" class="header-cover">
+                    {% endif %}
+                    <div class="headings preview-card-headings">
                     {% block headings %}
-                        <div>
-                            <h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
-                        </div>
-                        <div>
-                            <span class="heading subtitle is-3">
-                            {% block subtitle %}
-                                {% if subtitle %}
-                                    {{ subtitle }}
-                                {% elif parent and parent.is_published %}
-                                    <a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
-                                        <span class="icon">
-                                            <i class="fa fa-angles-right"></i>
-                                        </span>
-                                        {{ parent.title }}
-                                    </a>
-                            {% endif %}
-                            </span>
-                            {% endblock %}
-                            </span>
-                        </div>
+                    <div>
+                        <h1 class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</h1>
+                    </div>
+                    <div>
+                        {% spaceless %}
+                        <span class="heading subtitle is-3">
+                        {% block subtitle %}
+                        {% if subtitle %}
+                            {{ subtitle }}
+                        {% elif parent and parent.is_published %}
+                            <a href="{{ parent.get_absolute_url|escape }}" class="heading subtitle">
+                                <span class="icon">
+                                    <i class="fa fa-angles-right"></i>
+                                </span>
+                                {{ parent.title }}
+                            </a>
+                        {% elif page and page.category %}
+                            <a href="{% url "page-list" %}?category__id={{ page.category.id }}">
+                                <span class="icon">
+                                    <i class="fa fa-angles-right"></i>
+                                </span>
+                                {{ page.category.title }}
+                            </a>
+                        {% endif %}
+                        {% endblock %}
+                        </span>
+                        {% endspaceless %}
+                        </span>
+                    </div>
                     {% endblock %}
                     </div>
-                    <img src="{{ cover }}">
                 {% endblock %}
                 </header>
+                {% endblock %}
 
                 {% block content-container %}
                 <div class="container content">
diff --git a/aircox/templates/aircox/basepage_list.html b/aircox/templates/aircox/basepage_list.html
index 658173a..1d9f28b 100644
--- a/aircox/templates/aircox/basepage_list.html
+++ b/aircox/templates/aircox/basepage_list.html
@@ -26,7 +26,7 @@
 {% block content-container %}
 {{ block.super }}
 
-<div class="container">
+<div class="container clear-both">
 
 {% block before_list %}{% endblock %}
 
diff --git a/aircox/templates/aircox/page_detail.html b/aircox/templates/aircox/page_detail.html
index f54fcb6..7d475a8 100644
--- a/aircox/templates/aircox/page_detail.html
+++ b/aircox/templates/aircox/page_detail.html
@@ -10,13 +10,6 @@ Context:
 - related_url: url to the full list of related_objects
 {% endcomment %}
 
-{% block header_crumbs %}
-{{ block.super }}
-{% if page.category %}
-{% if parent %} / {% endif %} {{ page.category.title }}
-{% endif %}
-{% endblock %}
-
 {% block top-nav-tools %}
 {% has_perm page "change" as can_edit %}
 {% if can_edit %}
diff --git a/aircox/templates/aircox/program_detail.html b/aircox/templates/aircox/program_detail.html
index 94dcdf0..c9f028a 100644
--- a/aircox/templates/aircox/program_detail.html
+++ b/aircox/templates/aircox/program_detail.html
@@ -4,12 +4,10 @@
 
 {% include "aircox/program_sidebar.html" %}
 
-{% block headings %}
-
+{% block content-container %}
 {% with schedules=program.schedule_set.all %}
-{{ block.super }}
 {% if schedules %}
-<section class="schedules">
+<section class="container schedules">
     {% for schedule in schedules %}
     <div class="schedule">
         <div class="heading">
@@ -36,9 +34,6 @@
 </section>
 {% endif %}
 {% endwith %}
-{% endblock %}
-
-{% block content-container %}
 
 {{ block.super }}
 
diff --git a/aircox/templates/aircox/widgets/card.html b/aircox/templates/aircox/widgets/card.html
index 16b6ccc..127c29f 100644
--- a/aircox/templates/aircox/widgets/card.html
+++ b/aircox/templates/aircox/widgets/card.html
@@ -10,6 +10,7 @@
 {% endblock %}
 {% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
 
+
 {% block inner %}
 {% block headings-container %}
     {{ block.super }}
diff --git a/aircox/templates/aircox/widgets/preview.html b/aircox/templates/aircox/widgets/preview.html
index 2742029..bdf5a9b 100644
--- a/aircox/templates/aircox/widgets/preview.html
+++ b/aircox/templates/aircox/widgets/preview.html
@@ -11,13 +11,14 @@ Styling related context:
 - is_active: add "active" css class
 - is_small: add "small" css class
 - is_tiny: add "tiny" css class
+- tag
 - tag_class: css class to set to main tag
 - tag_extra: extra tag attributes
 
 {% endcomment %}
 
 {% block outer %}
-<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}active {% endif %}{% block tag-class %}{{ tag_class|default:"" }} {% endblock %}" {% block tag-extra %}{% endblock %}>
+<{{ tag|default:"article" }} class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}active {% endif %}{% block tag-class %}{{ tag_class|default:"" }} {% endblock %}" {% block tag-extra %}{% endblock %}>
 {% block inner %}
     {% block headings-container %}
     <header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
@@ -50,5 +51,5 @@ Styling related context:
     </div>
     {% endblock %}
 {% endblock %}
-</article>
+</{{ tag|default:"article" }}>
 {% endblock %}
diff --git a/aircox/templatetags/aircox.py b/aircox/templatetags/aircox.py
index 057aa0d..47fbf49 100644
--- a/aircox/templatetags/aircox.py
+++ b/aircox/templatetags/aircox.py
@@ -25,6 +25,9 @@ def do_page_widget(context, widget, object, dir="aircox/widgets", **ctx):
     ctx["request"] = context["request"]
     ctx["object"] = object
     ctx["widget"] = widget
+    if object.pk and not ctx.get("tag_id"):
+        model = type(object)._meta.model_name
+        ctx["tag_id"] = f"{widget}_{model}_{object.pk}"
     ctx["widget_template"] = f"{dir}/{widget}.html"
     return render_to_string(object.get_template_name(widget), ctx)
 
diff --git a/assets/src/assets/common.scss b/assets/src/assets/common.scss
index e23ca11..fc26ac8 100644
--- a/assets/src/assets/common.scss
+++ b/assets/src/assets/common.scss
@@ -1,7 +1,6 @@
 @use "./vars" as v;
 @import "./vendor";
 @import "./helpers";
-@import "./components";
 
 //-- helpers/modifiers
 //-- forms
diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss
index 1583cd6..13a8546 100644
--- a/assets/src/assets/components.scss
+++ b/assets/src/assets/components.scss
@@ -7,10 +7,13 @@
     --heading-bg-highlight-color: var(--highlight-color-2);
     --heading-font-family: default;
 
+    --preview-title-sz: #{v.$text-size-bigger};
+    --preview-subtitle-sz: #{v.$text-size-medium};
     --preview-cover-size: 24rem;
     --preview-cover-small-size: 10rem;
     --preview-cover-tiny-size: 4rem;
-    --header-height: 30rem;
+    --preview-wide-content-sz: #{v.$text-size-bigger};
+    --header-height: var(--preview-cover-size);
 
     --a-carousel-pb: #{v.$text-size-medium};
     --a-carousel-gap: #{v.$mp-4};
@@ -45,8 +48,33 @@
 }
 
 
+@media screen and (max-width: v.$screen-wide) {
+    :root {
+        --section-content-sz: 1rem;
+
+        --preview-title-sz: #{v.$text-size};
+        --preview-subtitle-sz: #{v.$text-size};
+        --preview-cover-size: 14rem;
+        --preview-cover-small-size: 10rem;
+        --preview-cover-tiny-size: 4rem;
+        --preview-wide-content-sz: #{v.$text-size};
+    }
+}
+
 // ---- ---- Preview & items
-// ---- heading
+// ---- headings
+.title {
+    &.is-1 { font-size: var(--title-1-sz); }
+    &.is-2 { font-size: var(--title-2-sz); }
+    &.is-3 { font-size: var(--title-3-sz); }
+}
+
+.subtitle {
+    &.is-1 { font-size: var(--title-1-sz); }
+    &.is-2 { font-size: var(--title-2-sz); }
+    &.is-3 { font-size: var(--title-3-sz); }
+}
+
 .heading {
     display: inline-block;
 
@@ -162,12 +190,12 @@
     .title, .title:not(:last-child) {
         // second is bulma reset
         font-weight: v.$weight-bold;
-        font-size: v.$text-size-bigger;
+        font-size: var(--preview-title-sz);
         margin-bottom: unset;
     }
     .subtitle {
         font-weight: v.$weight-bolder;
-        font-size: v.$text-size-bigger;
+        font-size: var(--preview-subtitle-sz);
         margin-bottom: unset;
     }
     //.content, .actions {
@@ -193,18 +221,13 @@
 
 }
 
+
 @media screen and (max-width: v.$screen-small) {
     .preview .content {
         display: none;
     }
 }
 
-@media screen and (max-width: v.$screen-wide) {
-    :root {
-        --preview-cover-size: 18em;
-    }
-}
-
 
 .preview-cover {
     background-size: cover;
@@ -253,13 +276,6 @@
 }
 
 
-// ---- specific
-.preview.comment {
-    .title { font-size: v.$text-size-bigger; }
-    .subtitle { font-size: v.$text-size; }
-}
-
-
 // ---- list
 .list-item {
     width: 100%;
@@ -325,14 +341,17 @@
     }
 
     & .content {
-        font-size: v.$text-size-bigger;
+        font-size: var(--preview-wide-content-sz);
         flex-grow: 1;
     }
 }
 
 
 // ---- card
+
 .preview-card {
+    padding: 0rem !important;
+
     height: var(--preview-cover-size);
     width: var(--preview-cover-size);
 
@@ -356,7 +375,7 @@
 }
 
 
-.preview-card-headings {
+.card-headings, .preview-card-headings {
     padding-top: v.$mp-3;
 
     & > div:not(:last-child),
@@ -373,21 +392,25 @@
 // ---- page header
 .header {
     &.preview-header {
-        display: flex;
+        //display: flex;
         align-items: start;
         gap: v.$mp-3;
         min-height: unset;
         padding-top: v.$mp-3 !important;
 
-        .headings {
-            flex-grow: 1;
-            padding-top: 0 !important;
-        }
-
     }
-    img {
-        height: var(--preview-cover-size);
-        max-width: calc(var(--preview-cover-size) * 2);
+
+    .headings {
+        width: unset;
+        flex-grow: 1;
+        padding-top: 0 !important;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.has-cover {
+        min-height: calc( var(--header-height) / 2 );
     }
 
     .title {
@@ -399,6 +422,40 @@
 }
 
 
+.header-cover:not(:only-child) {
+    float: right;
+    height: var(--header-height);
+    max-width: calc(var(--header-height) * 2);
+    margin: 0 0 v.$mp-4 v.$mp-4;
+}
+.header-cover:only-child {
+    with: 100%;
+}
+
+
+
+@media screen and (max-width: v.$screen-small) {
+    .container.header {
+        width: 100%;
+
+        .headings {
+            width: 100%;
+            clear: both;
+        }
+
+        .header-cover {
+            float: none;
+            width: 100%;
+            max-width: unset;
+            height: unset;
+            margin-left: 0rem;
+            margin-right: 0rem;
+        }
+    }
+
+}
+
+
 // ---- card grid
 .card-grid {
     display: grid;
diff --git a/assets/src/assets/helpers.scss b/assets/src/assets/helpers.scss
index 3c43261..cece87a 100644
--- a/assets/src/assets/helpers.scss
+++ b/assets/src/assets/helpers.scss
@@ -3,11 +3,16 @@
 .align-left { text-align: left; justify-content: left; }
 .align-right { text-align: right; justify-content: right; }
 
+.clear-left { clear: left !important }
+.clear-right { clear: right !important }
+.clear-both { clear: both !important }
+
 .d-inline { display: inline !important; }
 .d-block { display: block !important; }
 .d-inline-block { display: inline-block !important; }
 
-.flex-push-right { margin-left: auto; }
+.push-right, .flex-push-right { margin-left: auto !important; }
+.push-bottom { margin-top: auto !important; }
 .flex-grow-0 { flex-grow: 0 !important; }
 
 .float-right { float: right }
diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss
index 05100ac..76b3a5b 100644
--- a/assets/src/assets/public.scss
+++ b/assets/src/assets/public.scss
@@ -44,12 +44,14 @@
 
 
 .schedules {
-    margin: 0;
     padding-top: 0;
+    margin-bottom: calc(0rem - v.$mp-3) !important;
 }
 
 .schedule {
-    margin-bottom: v.$mp-2;
+    display: inline-block;
+    margin: v.$mp-3;
+    margin-left: 0rem;
 
     .day {
         font-weight: v.$weight-bold;
@@ -268,7 +270,6 @@ nav li {
 
     margin-top: v.$mp-3;
     text-align: right;
-    font-size: v.$text-size-medium;
 
     > a:only-child {
         margin-left: auto;
@@ -302,19 +303,66 @@ nav li {
     }
 }
 
+// ---- page header
+.header {
+    &.preview-header {
+        //display: flex;
+        align-items: start;
+        gap: v.$mp-3;
+        min-height: unset;
+        padding-top: v.$mp-3 !important;
+
+    }
+
+    .headings {
+        width: unset;
+        flex-grow: 1;
+        padding-top: 0 !important;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    &.has-cover {
+        min-height: calc( var(--header-height) / 2 );
+    }
+
+    .title {
+        font-size: v.$h1-size;
+    }
+    .subtitle {
+        font-size: v.$h2-size;
+    }
+}
+
+
+.header-cover:not(:only-child) {
+    float: right;
+    height: var(--header-height);
+    max-width: calc(var(--header-height) * 2);
+    margin: 0 0 v.$mp-4 v.$mp-4;
+}
+.header-cover:only-child {
+    with: 100%;
+}
+
 // ---- ---- detail
 .page-content {
     margin-top: v.$mp-6;
-    margin-bottom: v.$mp-6;
+
+    &:not(:last-child) {
+        margin-bottom: v.$mp-6;
+    }
 }
 
 // ---- responsive
-@media screen and (max-width: v.$screen-normal) {
-    .container.header {
-        margin-right: 0 !important;
-        margin-left: 0 !important;
-    }
+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;
         margin-right: v.$mp-4;
@@ -322,4 +370,27 @@ nav li {
 }
 
 @media screen and (max-width: v.$screen-small) {
+    .page .container {
+        margin-left: v.$mp-2;
+        margin-right: v.$mp-2;
+    }
+
+    .container.header {
+        width: calc( 100% - v.$mp-2 );
+
+        .headings {
+            width: 100%;
+            clear: both;
+        }
+
+        .header-cover {
+            float: none;
+            width: 100%;
+            max-width: unset;
+            height: unset;
+            margin-left: 0rem;
+            margin-right: 0rem;
+        }
+    }
+
 }
diff --git a/assets/src/assets/vendor.scss b/assets/src/assets/vendor.scss
index c3f6270..fa75e86 100644
--- a/assets/src/assets/vendor.scss
+++ b/assets/src/assets/vendor.scss
@@ -1,8 +1,12 @@
 @import 'v-calendar/style.css';
+
+// ---- bulma
+$body-color: #000;
+$title-color: #000;
+
+
 @import "~bulma/sass/utilities/_all.sass";
 
-$menu-item-hover-background-color: #dfdfdf;
-$menu-item-active-background-color: #d2d2d2;
 
 @import "~bulma/sass/base/_all";
 @import "~bulma/sass/components/dropdown";
diff --git a/notes.md b/notes.md
index d9dcba9..6839e18 100755
--- a/notes.md
+++ b/notes.md
@@ -1,3 +1,18 @@
+# TODO
+- card: url
+- page header:
+    - content inline
+    - responsive
+
+
+# Proposals
+- diffusion list view for a program + link on program page view
+- add podcast list to playlist
+- pause on "space" key
+
+
+##############
+
 This file is used as a reminder, can be used as crappy documentation too.
 
 - player