2024-03-25 11:27:07 +01:00
98 changed files with 498 additions and 500 deletions
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +1,4 @@
 [submodule "assets_shared"]
 	path = assets_shared
 	url = https://projects.blender.org/infrastructure/web-assets.git
+	branch = v2
--- a/2
+++ b/2
@ -1 +1 @@
-2.0.0
+2.1.0-alpha
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 2c38af8288630d7d30b38440779c7280cf9c8a3b
+Subproject commit 6527140bbf1479171256d25d9afcd310ef897f17
--- a/blog/templates/blog/post_detail.html
+++ b/blog/templates/blog/post_detail.html
@ -19,7 +19,7 @@
 {% block content %}
  {% if post.header %}
    <div class="hero hero-blog">
-      <div class="hero-background" style="background-image: url('{{ post.header.url }}'); background-position-y: 50%"></div>
+      <div class="hero-bg" style="background-image: url('{{ post.header.url }}'); background-position-y: 50%"></div>
      <div class="hero-overlay"></div>
      <div class="hero-overlay-gradient"></div>
    </div>
--- a/blog/templates/blog/post_list.html
+++ b/blog/templates/blog/post_list.html
@ -19,7 +19,7 @@
        {% include "common/components/navigation/pagination.html" %}
      </div>
    </div>
-    <div class="card-layout-card-transparent cards-list">
+    <div class="card-layout-card-transparent cards">
      {% for post in posts %}
        {% if post.is_published or user.is_superuser or user.is_staff %}
          {% include 'common/components/cards/card_blog.html' %}
--- a/blog/templates/blog/subscribe_jumbotron.html
+++ b/blog/templates/blog/subscribe_jumbotron.html
@ -18,7 +18,7 @@
      </div>
    </div>
  </div>
-  <div class="hero-background" style="background-image: url({% static "common/images/welcome/dweebs-bg.png" %}); background-position-y: 50%">
+  <div class="hero-bg" style="background-image: url({% static "common/images/welcome/dweebs-bg.png" %}); background-position-y: 50%">
  </div>
  <div class="hero-overlay"></div>
 </div>
--- a/characters/templates/characters/character_list.html
+++ b/characters/templates/characters/character_list.html
@ -22,7 +22,7 @@
        </div>
      </div>
    </div>
-    <div class="hero-background" style="background-image: url('{% static 'characters/images/characters-header.jpg' %}'); background-position-y: 50%">
+    <div class="hero-bg" style="background-image: url('{% static 'characters/images/characters-header.jpg' %}'); background-position-y: 50%">
    </div>
    <div class="hero-overlay"></div>
    <div class="hero-overlay-gradient"></div>
@ -33,7 +33,7 @@
  <div class="container mb-3 position-relative z-1">
    <div class="row">
      <div class="col-md-12">
-        <div class="card-layout-card-transparent cards-list">
+        <div class="card-layout-card-transparent cards">
          {% for character in characters %}
            {% if character.is_published or user.is_superuser or user.is_staff %}
              {% include "characters/components/card_character.html" %}
--- a/characters/templates/characters/characterversion_detail.html
+++ b/characters/templates/characters/characterversion_detail.html
@ -76,7 +76,7 @@
          <div class="col-auto">
            {% include 'common/components/cards/card_profile.html' with user=character_version.static_asset.user title="Publisher" %}
          </div>
-          <div class="col ml-auto small text-end text-muted">
+          <div class="col ms-auto small text-end text-muted">
            {% if character_version.is_free %}
              {% include "common/components/cards/pill.html" with label='Free' %}
            {% endif %}
@ -103,7 +103,7 @@
        <section class="markdown-text mb-3">{% with_shortcodes character_version.description|markdown_unsafe %}</section>
        {% if character.showcases.count %}
          <h2>Showcases</h2>
-          <div class="card-layout-card-transparent cards-list">
+          <div class="card-layout-card-transparent cards">
            {% for showcase in character.showcases.all %}
              {% include "characters/components/card_character_showcase.html" %}
            {% endfor %}
--- a/characters/templates/characters/components/card_character.html
+++ b/characters/templates/characters/components/card_character.html
@ -1,22 +1,22 @@
 {% load common_extras %}
 {% with character_version=character.latest_version %}
  {% with character_version.get_absolute_url as detail_url %}
-    <div class="cards-list-item-outer">
-      <a aria-label="{{ character.name }}" class="cards-list-item-inner" href="{{ detail_url }}">
+    <div class="cards-item">
+      <a aria-label="{{ character.name }}" class="cards-item-content" href="{{ detail_url }}">
        {% if character_version.static_asset.thumbnail %}
-        <div class="cards-list-item-thumbnail">
+        <div class="cards-item-thumbnail">
            {% block image %}
              <img alt="{{ character.name }}" src="{{ character_version.static_asset.thumbnail_m_url }}">
            {% endblock image %}
          </div>
        {% endif %}
-        <h3 class="cards-list-item-title">
+        <h3 class="cards-item-title">
          {% if character.is_new and character.is_published %}
            <div class="badge bg-primary">New</div>
          {% endif %}
          {{ character.name }}
        </h3>
-        <div class="cards-list-item-extra">
+        <div class="cards-item-extra">
          <ul>
            {% if not character.is_published or not character_version.is_published %}
              <li class="me-2">
--- a/characters/templates/characters/components/card_character_showcase.html
+++ b/characters/templates/characters/components/card_character_showcase.html
@ -1,21 +1,21 @@
 {% load common_extras %}
 {% with showcase.get_absolute_url as detail_url %}
-  <div class="cards-list-item-outer">
-    <a aria-label="{{ showcase.title }}" class="cards-list-item-inner" href="{{ detail_url }}">
+  <div class="cards-item">
+    <a aria-label="{{ showcase.title }}" class="cards-item-content" href="{{ detail_url }}">
      {% if showcase.static_asset.thumbnail %}
        {% block image %}
-          <div class="cards-list-item-thumbnail">
+          <div class="cards-item-thumbnail">
            <img alt="{{ showcase.title }}" src="{{ showcase.static_asset.thumbnail_m_url }}">
          </div>
        {% endblock image %}
      {% endif %}
-      <h3 class="cards-list-item-title">
+      <h3 class="cards-item-title">
        {% if showcase.is_new and showcase.is_published %}
          <div class="badge">New</div>
        {% endif %}
        {{ showcase.title }}
      </h3>
-      <div class="cards-list-item-extra">
+      <div class="cards-item-extra">
        <ul>
          <li>
            {% if not showcase.is_published or not showcase.is_published %}
--- a/comments/templates/comments/components/comment.html
+++ b/comments/templates/comments/components/comment.html
@ -7,7 +7,7 @@
 <div
  id="{{ comment.anchor }}"
  class="box comment {% if comment.is_archived and comment.is_top_level %}archived{% endif %} {% if comment.is_top_level %}top-level-comment{% endif %}"
-  data-comment-id="{{ comment.id }}" data-message="{{ comment.message }}" data-profile-image-url="{{ profile_image_url }}" data-comment-like-url="{{ comment.like_url }}"
+  data-comment-id="{{ comment.id }}" data-message="{{ comment.message }}" data-profile-img-url="{{ profile_image_url }}" data-comment-like-url="{{ comment.like_url }}"
  {% if comment.delete_tree_url is not None %} data-delete-tree-url="{{ comment.delete_tree_url }}" {% endif %}
  {% if comment.hard_delete_tree_url is not None %} data-hard-delete-tree-url="{{ comment.hard_delete_tree_url }}"{% endif %}
  {% if comment.edit_url is not None %} data-edit-url="{{ comment.edit_url }}" {% endif %}
--- a/common/static/common/scripts/vendor/chart.bundle.min.js
+++ b/common/static/common/scripts/vendor/chart.bundle.min.js
--- a/common/static/common/scripts/vendor/highlight.min.js
+++ b/common/static/common/scripts/vendor/highlight.min.js
@ -597,4 +597,3 @@ match:a.either(/^@@ +-\d+,\d+ +\+\d+,\d+ +@@/,/^\*\*\* +\d+,\d+ +\*\*\*\*$/,/^--
 begin:a.either(/Index: /,/^index/,/={3,}/,/^-{3}/,/^\*{3} /,/^\+{3}/,/^diff --git/),
 end:/$/},{match:/^\*{15}$/}]},{className:"addition",begin:/^\+/,end:/$/},{
 className:"deletion",begin:/^-/,end:/$/},{className:"addition",begin:/^!/,
-end:/$/}]}}})();hljs.registerLanguage("diff",e)})();
--- a/common/static/common/scripts/vendor/instantsearch.production.min.js
+++ b/common/static/common/scripts/vendor/instantsearch.production.min.js
--- a/common/static/common/scripts/vendor/plyr.polyfilled.js
+++ b/common/static/common/scripts/vendor/plyr.polyfilled.js
@ -8199,7 +8199,7 @@ typeof navigator === "object" && (function (global, factory) {
          props.iconPressed = 'exit-fullscreen';
          break;

-        case 'play-large':
+        case 'play-lg':
          attributes.class += " ".concat(this.config.classNames.control, "--overlaid");
          type = 'play';
          props.label = 'play';
@ -9107,8 +9107,8 @@ typeof navigator === "object" && (function (global, factory) {
          showMenuPanel = controls.showMenuPanel;
      this.elements.controls = null; // Larger overlaid play button

-      if (is$1.array(this.config.controls) && this.config.controls.includes('play-large')) {
-        this.elements.container.appendChild(createButton.call(this, 'play-large'));
+      if (is$1.array(this.config.controls) && this.config.controls.includes('play-lg')) {
+        this.elements.container.appendChild(createButton.call(this, 'play-lg'));
      } // Create the container


@ -10034,7 +10034,7 @@ typeof navigator === "object" && (function (global, factory) {
      key: 'plyr'
    },
    // Default controls
-    controls: ['play-large', // 'restart',
+    controls: ['play-lg', // 'restart',
    // 'rewind',
    'play', // 'fast-forward',
    'progress', 'current-time', // 'duration',
@ -13619,7 +13619,7 @@ typeof navigator === "object" && (function (global, factory) {
   * Notes:
   * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole
   * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails
-   * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
+   * - This implementation uses multiple separate img elements. Other implementations use background-img on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
   */


--- a/common/static/common/styles/studio/_bootstrap-overrides.sass
+++ b/common/static/common/styles/studio/_bootstrap-overrides.sass
@ -9,7 +9,7 @@
  display: flex
  flex-grow: 1
  flex-shrink: 0
-  gap: var(--spacer-sm)
+  gap: var(--spacer-2)
  justify-content: space-between

 /* Embed. */
@ -19,8 +19,8 @@ iframe
 /* Input group. */
 .form-select,
 .input-group-text
-  background-color: var(--background-color-secondary)
-  color: var(--text-color)
+  background-color: var(--color-bg-secondary)
+  color: var(--color-text)

 .form-select,
 select
@ -44,10 +44,10 @@ select
 /* List. */
 .list-group-item
  background-color: transparent
-  border-color: var(--text-color-tertiary)
+  border-color: var(--color-text-tertiary)
  border-left: 0
  border-right: 0
-  color: var(--text-color-primary)
+  color: var(--color-text-primary)
  padding-bottom: var(--spacer)
  padding-top: var(--spacer)

@ -69,9 +69,9 @@ select

 /* Tooltip. */
 .tooltip-inner
-  background-color: var(--background-color-tertiary)
-  color: var(--text-color)
+  background-color: var(--color-bg-tertiary)
+  color: var(--color-text)

 /* Utilities. */
 .border-bottom
-  border-bottom-color: var(--text-color-tertiary) !important
+  border-bottom-color: var(--color-text-tertiary) !important
--- a/common/static/common/styles/studio/_carousel.sass
+++ b/common/static/common/styles/studio/_carousel.sass
@ -3,7 +3,8 @@
  padding: 0

 .carousel-inner
-  padding: $spacer / 2 0
+  +padding(0, x)
+  +padding(2, y)

  .carousel-item
    // Fix web-assets style row display
@ -91,11 +92,11 @@
 .carousel-card-toolbar
  display: flex
  justify-content: flex-end
-  margin-top: $spacer / 2
+  +margin(2, top)

  @include media-breakpoint-up(md)
    align-items: flex-start
    margin-top: 0

  a:first-of-type
-    margin-right: $spacer / 2
+    +margin(2, right)
--- a/common/static/common/styles/studio/_comments.sass
+++ b/common/static/common/styles/studio/_comments.sass
@ -17,11 +17,11 @@
      opacity: 0.5

    .comment-expand-archived
-      color: var(--text-color-secondary)
+      color: var(--color-text-secondary)
      &:focus,
      &:hover
-        color: var(--text-color-primary)
-      margin-left: $spacer / 2
+        color: var(--color-text-primary)
+      +margin(2, left)
      text-decoration: underline
      transition: $transition-base

@ -29,44 +29,41 @@
      margin: 0

    .highlight
-      box-shadow: inset 0 0 0 2px var(--color-primary)
+      box-shadow: inset 0 0 0 2px var(--color-accent)

 .comment-content-inner
-  margin-top: $spacer / 4
+  +margin(1, top)

 .comment-date
  color: var(--color-tertiary)
-  margin-left: auto
+  +margin(auto, left)

 .comment-dropdown
-  padding: 4px
+  padding: var(--spacer-1)

 .comment-input
  align-items: center
  display: flex
  flex-direction: row
-  margin-bottom: $spacer / 2
-  margin-top: $spacer / 2
+  +margin(2, bottom)
+  +margin(2, top)

 .comment-input-div
-  @include border-radius($input-border-radius-sm)
-  height: auto
-  line-height: $input-line-height
-  padding: $input-padding-y-sm $input-padding-x-sm
-  position: relative
-  text-align: left
+  @extend .form-control
+
+  height: calc(var(--spacer) * 2.5)

  &.disabled
    opacity: $btn-disabled-opacity

  &.form-control
-    background-color: var(--background-color-tertiary)
+    background-color: var(--color-bg-tertiary)

  &:empty
    &::before
-      color: var(--text-color-tertiary)
+      color: var(--color-text-tertiary)
      content: 'Leave a comment'
-      left: $spacer / 2
+      left: var(--spacer-2)
      position: absolute
      top: 50%
      transform: translateY(-50%)
@ -76,15 +73,15 @@

 .comment-name-date-wrapper
  align-items: center
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
  display: flex
  gap: 0.5rem
-  margin-bottom: var(--spacer-sm)
+  margin-bottom: var(--spacer-2)

 .comment-section
  border-top: var(--border-width) solid var(--component-bg)
-  margin-top: var(--spacer-lg)
-  padding-top: var(--spacer)
+  margin-top: calc(var(--spacer) * 2)
+  +padding(3, top)

 .comment-text
  img
@ -94,34 +91,34 @@
 .comment-toolbar
  .btn + .btn,
  .dropdown-menu + .btn
-    margin-left: $spacer / 4
+    +margin(1, left)

  color: var(--text-secondary)

 .comments
  h3
-    margin-left: var(--spacer-sm)
-    margin-top: var(--spacer-lg)
+    margin-left: var(--spacer-2)
+    margin-top: calc(var(--spacer) * 2)

 .more-comments-button
  display: none
-  margin-top: $spacer / 2
+  +margin(2, top)

  &.collapsed
    display: inline-block

 .replies
  .comment
-    background-color: var(--background-color-secondary)
-    margin-bottom: var(--spacer)
-    margin-left: var(--spacer)
-    margin-top: 0
-    padding: var(--spacer)
+    background-color: var(--color-bg-secondary)
+    +margin(3, bottom)
+    +margin(3, left)
+    +margin(0, top)
+    +padding(3)

    &:first-child
      border-top: none
-      margin-top: var(--spacer)
+      +margin(3, top)

 .top-level-comment
-  background: var(--background-color-primary)
+  background: var(--color-bg-primary)
  border-radius: var(--border-radius-lg)
--- a/common/static/common/styles/studio/_custom.sass
+++ b/common/static/common/styles/studio/_custom.sass
@ -33,20 +33,20 @@
      display: inline-block

 /* Card. */
-.cards-list-films
+.cards-films
  --grid-gap-size: 3rem

-.cards-list-item-thumbnail
+.cards-item-thumbnail
  &.ratio-16x9
    &::before
      display: none !important

-.cards-list-item-file
-  .cards-list-item-title
-    font-size: var(--font-size-base)
+.cards-item-file
+  .cards-item-title
+    font-size: var(--fs-base)

-.cards-list-item-film
-  .cards-list-item-thumbnail
+.cards-item-film
+  .cards-item-thumbnail
    &::before
      padding-top: calc(23 / 16 * 100%)

@ -81,8 +81,8 @@
      position: absolute
      right: calc(var(--spacer) / 4)

-  // Reset cards-list-item-thumbnail
-  .cards-list-item-thumbnail
+  // Reset cards-item-thumbnail
+  .cards-item-thumbnail
    margin-bottom: 0

    &::before
@ -119,7 +119,7 @@
  &.fourbythree,
  &.square,
  &.widescreen
-    .cards-list-item-thumbnail
+    .cards-item-thumbnail
      .file-img
        left: 50%
        object-fit: cover
@ -128,20 +128,20 @@
        transform: translate(-50%, -50%)

  &.fourbythree
-    .cards-list-item-thumbnail
+    .cards-item-thumbnail
      +make-aspect-ratio('4x3')

  &.square
-    .cards-list-item-thumbnail
+    .cards-item-thumbnail
      +make-aspect-ratio('1x1')

  &.widescreen
-    .cards-list-item-thumbnail
+    .cards-item-thumbnail
      +make-aspect-ratio('16x9')

 .file-lock-text
  align-items: center
-  color: var(--text-color-primary)
+  color: var(--color-text-primary)
  display: flex
  flex-direction: column
  height: 100%
@ -152,7 +152,7 @@
  width: 100%

  &::before
-    background: var(--background-color-secondary)
+    background: var(--color-bg-secondary)
    content: close-quote
    display: block
    height: 100%
@ -228,7 +228,7 @@
  border-radius: 50%
  color: white
  display: flex
-  font-size: calc(var(--font-size-extra-small) * 0.8) !important
+  font-size: calc(var(--fs-xs) * 0.8) !important
  height: var(--spacer)
  justify-content: center
  position: absolute
@ -251,7 +251,7 @@

 /* Payment. */
 .braintree-heading
-  color: var(--text-color)
+  color: var(--color-text)

 /* Profile. */
 .profile-avatar
@ -276,11 +276,11 @@
    flex-direction: column

    .profile-name
-      font-size: var(--font-size-sm)
+      font-size: var(--fs-sm)

    .profile-title
-      color: var(--text-color-secondary)
-      font-size: var(--font-size-xs)
+      color: var(--color-text-secondary)
+      font-size: var(--fs-xs)

 /* Progress. */
 .global-progress
@ -292,7 +292,7 @@
  z-index: $zindex-popover

  .progress-bar
-    background: var(--color-primary)
+    background: var(--color-accent)
    height: 2px

 .progress
@ -350,12 +350,12 @@
    +media-md
      display: flex

-// TODO: rename class 'x-small'?
+// TODO: rename class 'x-sm'?
 [data-bs-tooltip="tooltip-overflow"]
  overflow: hidden

-.x-small
-  font-size: var(--font-size-xs)
+.x-sm
+  font-size: var(--fs-xs)

 /* Utilities (components). */
 // TODO: @web-assets refactor style components spoiler-alert
--- a/common/static/common/styles/studio/_dropdown.sass
+++ b/common/static/common/styles/studio/_dropdown.sass
@ -1,7 +1,7 @@
 // TODO: cleanup and refactor component markup and style
 .dropdown-menu
  box-shadow: var(--box-shadow-lg)
-  margin-top: $spacer / 2
+  +margin(2, top)
  min-width: 240px

  &.show
@ -20,14 +20,15 @@
  border-radius: var(--border-radius)
  display: flex
  +font-weight(400)
-  margin: var(--spacer-sm)
-  padding: var(--spacer-sm)
+  line-height: var(--lh-base)
+  margin: var(--spacer-2)
+  padding: var(--spacer-2)
  position: relative
  transition: $transition-base
  width: auto

  &:hover
-    background-color: var(--background-color-secondary)
+    background-color: var(--color-bg-secondary)
    color: white

    &::before
@ -37,17 +38,17 @@
  &.dropdown-item-text
    &:hover
      background-color: transparent
-      color: var(--text-color)
+      color: var(--color-text)

  &.icon
-    padding: $spacer / 2 $spacer * 0.75
+    padding: var(--spacer-2) calc(var(--spacer) * .75)
    width: auto

  i
-    margin-inline: var(--spacer-sm)
+    margin-inline: var(--spacer-2)

    &+span
-      margin-left: var(--spacer-sm)
+      +margin(2, left)

 .dropdown-menu-notification,
 .dropdown-menu-user
--- a/common/static/common/styles/studio/_modal.sass
+++ b/common/static/common/styles/studio/_modal.sass
@ -29,6 +29,9 @@
    top: var(--spacer)
    z-index: 1

+.modal-body
+  padding: var(--spacer)
+
 .modal-content
  background-color: var(--component-bg-dark)

@ -43,7 +46,7 @@
  +media-md
    display: flex

-  .modal-asset-image-wrapper
+  .modal-asset-img-wrapper
    cursor: zoom-in
    width: 100%

--- a/common/static/common/styles/studio/_navdrawer.sass
+++ b/common/static/common/styles/studio/_navdrawer.sass
@ -1,3 +1,4 @@
+// TODO: update post web-assets v2 upgrade style
 // TODO: cleanup and refactor component markup and style
@mixin scroll-bar($bg-color, $bar-color)
  scrollbar-color: $bar-color $bg-color
@ -82,7 +83,7 @@
 */

 .nav-drawer-nested
-  background: var(--background-color-tertiary)
+  background: var(--color-bg-tertiary)
  display: block
  border-radius: var(--border-radius-lg)
  border-right: 0
@ -150,7 +151,7 @@

 .drawer-nav-list
  background: var(--navbar-bg)
-  color: var(--text-color-secondary)
+  color: var(--color-text-secondary)
  list-style: none
  margin: var(--spacer) / 4 0
  padding: var(--spacer) / 4 0
@ -179,11 +180,11 @@
  &.complete
    // +.drawer-nav-section .drawer-nav-section-icon
      &::after
-        background-color: var(--color-primary)
+        background-color: var(--color-accent)

    .drawer-nav-section-icon
      ::before
-        background-color: var(--color-primary)
+        background-color: var(--color-accent)

  &:first-of-type
    .drawer-nav-section-icon
@ -215,7 +216,7 @@
  h4, .h4
    margin-bottom: 0
    line-height: 1.5
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
    transition: $transition-base

  span
@ -239,7 +240,7 @@
    text-decoration: none

    .drawer-nav-section-icon-progress .progress
-      stroke: var(--color-primary)
+      stroke: var(--color-accent)

    h4, .h4
      color: white
@ -267,11 +268,11 @@

      &-progress
        .progress
-          stroke: var(--color-primary)
+          stroke: var(--color-accent)

  .subtitle
    color:
-    font-size: var(--font-size-extra-small)
+    font-size: var(--fs-xs)

 .drawer-nav-section-edit
  color: white
@ -332,9 +333,9 @@ $circle-circumference: $circle-diameter * 3.14
  width: 30px

  &.progress
-    border: var(--border-width) solid var(--color-primary)
+    border: var(--border-width) solid var(--color-accent)
  i
-    font-size: $font-size-base * 1.125
+    font-size: $fs-base * 1.125

 .drawer-nav-section-icon-progress
  left: 50%
@ -347,7 +348,7 @@ $circle-circumference: $circle-diameter * 3.14
    //not using the $progress-bg here as it's too strong, meant for overlaying images
    // TODO: @web-sasets check variable $highlight-white-strong replacement
    // stroke: $highlight-white-strong
-    stroke: var(--text-color-secondary)
+    stroke: var(--color-text-secondary)
    stroke-dasharray: $circle-circumference
    stroke-dashoffset: calc((1 - var(--progress-fraction, 0)) * #{$circle-circumference}px)
    stroke-linecap: round
@ -356,7 +357,7 @@ $circle-circumference: $circle-diameter * 3.14
  .background
    fill: none
    // stroke: $highlight-white
-    stroke: var(--text-color-secondary)
+    stroke: var(--color-text-secondary)
    stroke-linecap: round
    stroke-width: 3px

@ -388,7 +389,7 @@ $circle-circumference: $circle-diameter * 3.14

  &::before
    // background: $highlight-white
-    background: var(--background-color-primary)
+    background: var(--color-bg-primary)
    border-radius: $border-radius
    content: close-quote
    height: calc(100% - #{$spacer / 2})
--- a/common/static/common/styles/studio/_utilities.sass
+++ b/common/static/common/styles/studio/_utilities.sass
@ -8,10 +8,10 @@
  @extend .hero-overlay

 .bg-secondary
-  background-color: var(--background-color-secondary) !important
+  background-color: var(--color-bg-secondary) !important

 .bg-tertiary
-  background-color: var(--background-color-tertiary) !important
+  background-color: var(--color-bg-tertiary) !important

 .body-bg
  background-color: var(--body-bg)
--- a/common/static/common/styles/studio/_variables.sass
+++ b/common/static/common/styles/studio/_variables.sass
@ -1,56 +1,38 @@
 $border-radius: var(--border-radius)
+
+$container-width: 132.0rem
+
 $font-path: "/static/assets/fonts"
+
 // Change Bootstrap 5 link text-decoration default
 $link-decoration: none
-$plyr-audio-progress-buffered-bg: var(--text-color)
+
+$plyr-audio-progress-buffered-bg: var(--color-text)
 $plyr-control-radius: var(--border-radius)
-$plyr-menu-color: var(--text-color)
-$plyr-video-control-color: var(--text-color)
-$plyr-video-control-bg-hover: var(--text-color)
+$plyr-menu-color: var(--color-text)
+$plyr-video-control-color: var(--color-text)
+$plyr-video-control-bg-hover: var(--color-text)

 \:root
-  --body-color-tertiary: var(--text-color-tertiary)
+  --body-color-bg: var(--color-bg) !important
+  --body-color-tertiary: var(--color-text-tertiary)
+
+  --body-bg: var(--color-bg)
+  --component-bg: var(--box-bg-color)
+  --component-bg-light: var(--color-bg-primary)
+  --component-bg-dark: var(--color-bg-secondary)
+
+  --body-color: var(--color-text)
+  --body-color-highlight: var(--color-text-primary)
+  --body-color-secondary: var(--color-text-secondary)
+  --body-color-tertiary: var(--color-text-tertiary)
+
+  --color-like: var(--color-danger)

  --profile-avatar-size: calc(var(--spacer) * 2)
  --profile-avatar-size-sm: var(--spacer)

-  --body-bg: var(--background-color)
-  --component-bg: var(--box-background-color)
-  --component-bg-light: var(--background-color-primary)
-  --component-bg-dark: var(--background-color-secondary)
+  --profile-avatar-size: calc(var(--spacer) * 2)
+  --profile-avatar-size-sm: var(--spacer)

-  --body-color: var(--text-color)
-  --body-color-highlight: var(--text-color-primary)
-  --body-color-secondary: var(--text-color-secondary)
-  --body-color-tertiary: var(--text-color-tertiary)
-
-  --border-radius: .33rem
-  --border-radius-lg: .66rem
-  --border-width: 2px
-
-  --transition-speed: 150ms
-
-  --color-like: var(--color-danger)
-  --color-danger: var(--color-danger)
-  --color-danger-text: var(--color-danger-text)
-  --color-danger-bg: var(--color-danger-bg)
-  --color-danger-bg-hover: var(--color-danger-bg-hover)
-
-  --box-shadow-lg: var(--box-shadow-lg)
-
-  --font-size-xs: 12px
-  --font-size-sm: 14px
-  --font-size-base: 16px
-
-  --profile-avatar-size: 32px
-  --profile-avatar-size-sm: 18px
-
-  --spacer: 1rem
-  --spacer-xs: calc(var(--spacer) / 4)
-  --spacer-sm: calc(var(--spacer) / 2)
-  --spacer-md: var(--spacer)
-  --spacer-lg: calc(var(--spacer) * 2)
-  --spacer-xl: calc(var(--spacer) * 4)
-  --spacer-xxl: calc(var(--spacer) * 8)
-
-  --filter-blur-value: 10px
+  --filter-blur-value: 1.0rem
--- a/common/static/common/styles/studio/_web-assets-overrides.sass
+++ b/common/static/common/styles/studio/_web-assets-overrides.sass
@ -5,17 +5,19 @@ a
 /* Button */
 button,
 .btn
+  padding: var(--spacer-1) var(--spacer) !important
+
  &:not([class^="btn btn-"]),
  &[class^="btn btn-lg"]
-    --btn-bg-color: var(--background-color-secondary)
-    --btn-bg-color-hover: var(--text-color)
-    --btn-color: var(--text-color)
+    --btn-color-bg: var(--color-bg-secondary)
+    --btn-color-bg-hover: var(--color-text)
+    --btn-color: var(--color-text)

    &:active,
    &:focus,
    &:hover
-      --btn-bg-color: var(--btn-bg-color-hover)
-      color: var(--background-color)
+      --btn-color-bg: var(--btn-color-bg-hover)
+      color: var(--color-bg)

 .btn-img
  padding: 0
@ -32,60 +34,75 @@ button,
  &:hover
    // TODO: change variable colour in web-assets
    background-color: hsl(213, 10%, 24%) // Same as nav-global-color-button-bg-hover
-    color: var(--text-color-primary)
+    color: var(--color-text-primary)

 /* Card. */
 a
-  .cards-list-item-thumbnail
+  .cards-item-thumbnail
    img
      transition: transform var(--transition-speed) ease-in-out

-a.cards-list-item-inner
+a.cards-item-content
  height: auto

  &:hover
    text-decoration: none

-    .cards-list-item-thumbnail img
+    .cards-item-thumbnail img
      transform: scale(1.033)

 .card-layout-card-transparent
-  .cards-list-item-inner
+  .cards-item-content
    background-color: transparent
    box-shadow: none

-.cards-list-item-extra
+.cards-item-extra
  padding-top: 0

-// Fix cards list item thumbnail overflow on hover transition when card is not within a cards-list
-.cards-list-item-thumbnail
+// Fix cards list item thumbnail overflow on hover transition when card is not within a cards
+.cards-item-thumbnail
  overflow: hidden

-.cards-list-item-title
+.cards-item-title
  margin-bottom: 0
  padding-bottom: var(--spacer-2)

+/* Deprecated. */
+.lead
+  line-height: calc(28 / 24)
+
+/* Details. */
+details
+  @extend .box
+
+  margin-bottom: var(--spacer) !important
+
+summary
+  &:before
+    left: var(--spacer-2)
+    top: 1.0rem
+
 /* Dropdown. */
 .dropdown-menu
-  font-size: var(--font-size-base)
+  font-size: var(--fs-base)

 /* Forms. */
 .form-control
  border: 0 // Make btn and input heights match in horizontal layouts
-  background-color: var(--background-color-secondary)
-  color: var(--text-color)
+  background-color: var(--color-bg-secondary)
+  color: var(--color-text)

  &:disabled,
  &[readonly]
-    background-color: var(--background-color-secondary)
+    background-color: var(--color-bg-secondary)
    background-repeat: no-repeat
    background-position: right var(--spacer) center
-    color: var(--text-color-secondary)
+    color: var(--color-text-secondary)
    padding-right: var(--spacer-4)

  &:focus
-    background-color: var(--background-color-secondary)
-    color: var(--text-color)
+    background-color: var(--color-bg-secondary)
+    color: var(--color-text)


 /* Modal. */
@ -136,11 +153,11 @@ a.cards-list-item-inner

  .page-item
    &:hover a
-      background-color: var(--background-color-primary)
+      background-color: var(--color-bg-primary)

 /* Table. */
 table
-  --table-border-color: var(--text-color-tertiary)
+  --table-border-color: var(--color-text-tertiary)

  background-color: transparent
  box-shadow: none
@ -152,6 +169,6 @@ table

 /* Type. */
 hr
-  border-color: var(--text-color-tertiary)
+  border-color: var(--color-text-tertiary)
 .small
-  font-size: var(--font-size-small)
+  font-size: var(--fs-sm)
--- a/common/static/common/styles/studio/studio.sass
+++ b/common/static/common/styles/studio/studio.sass
@ -2,7 +2,6 @@
@import "../vendor/bootstrap/functions"
@import "../vendor/bootstrap/variables"
@import "../vendor/bootstrap/mixins"
-@import "../vendor/bootstrap/utilities"

 // Bootstrap 5 for JS compatibility Layout & components
@import "../vendor/bootstrap/breadcrumb"
@ -10,18 +9,15 @@
@import "../vendor/bootstrap/modal"
@import "../vendor/bootstrap/carousel"

-// Bootstrap 5 Utilities
-@import "../vendor/bootstrap/utilities/api";
-
 // Configuration
@import variables

 // Vendors
@import "../vendor/plyr/plyr";

-// Web Assets dark
+// Web Assets
+// TODO: check why mixin padding doesn't work
@import "../../../../../assets_shared/src/styles/main"
-@import "../../../../../assets_shared/src/styles/_variables_dark"

 // Custom styles
@import bootstrap-overrides
--- a/common/static/common/styles/vendor/bootstrap/_accordion.scss
+++ b/common/static/common/styles/vendor/bootstrap/_accordion.scss
@ -8,7 +8,7 @@
  align-items: center;
  width: 100%;
  padding: $accordion-button-padding-y $accordion-button-padding-x;
-  @include font-size($font-size-base);
+  @include font-size($fs-base);
  color: $accordion-button-color;
  text-align: left; // Reset button style
  background-color: $accordion-button-bg;
--- a/common/static/common/styles/vendor/bootstrap/_alert.scss
+++ b/common/static/common/styles/vendor/bootstrap/_alert.scss
@ -44,14 +44,14 @@
 // Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
-  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-bg: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
+  @if (contrast-ratio($alert-bg, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix($value, color-contrast($alert-bg), abs($alert-color-scale));
  }
  .alert-#{$state} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    @include alert-variant($alert-bg, $alert-border, $alert-color);
  }
 }
 // scss-docs-end alert-modifiers
--- a/common/static/common/styles/vendor/bootstrap/_dropdown.scss
+++ b/common/static/common/styles/vendor/bootstrap/_dropdown.scss
@ -183,7 +183,7 @@
  display: block;
  padding: $dropdown-header-padding;
  margin-bottom: 0; // for use with heading elements
-  @include font-size($font-size-sm);
+  @include font-size($fs-sm);
  color: $dropdown-header-color;
  white-space: nowrap; // as with > li > a
 }
--- a/common/static/common/styles/vendor/bootstrap/_pagination.scss
+++ b/common/static/common/styles/vendor/bootstrap/_pagination.scss
@ -56,9 +56,9 @@
@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);

 .pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $fs-lg, $pagination-border-radius-lg);
 }

 .pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $fs-sm, $pagination-border-radius-sm);
 }
--- a/common/static/common/styles/vendor/bootstrap/_placeholders.scss
+++ b/common/static/common/styles/vendor/bootstrap/_placeholders.scss
@ -39,7 +39,7 @@
 }

 .placeholder-wave {
-  mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
+  mask-img: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
 }
--- a/common/static/common/styles/vendor/bootstrap/_popover.scss
+++ b/common/static/common/styles/vendor/bootstrap/_popover.scss
@ -141,7 +141,7 @@
 .popover-header {
  padding: $popover-header-padding-y $popover-header-padding-x;
  margin-bottom: 0; // Reset the default from Reboot
-  @include font-size($font-size-base);
+  @include font-size($fs-base);
  color: $popover-header-color;
  background-color: $popover-header-bg;
  border-bottom: $popover-border-width solid $popover-border-color;
--- a/common/static/common/styles/vendor/bootstrap/_reboot.scss
+++ b/common/static/common/styles/vendor/bootstrap/_reboot.scss
@ -26,7 +26,7 @@
 // null by default, thus nothing is generated.

 :root {
-  @if $font-size-root != null {
+  @if $fs-root != null {
    font-size: var(--#{$variable-prefix}root-font-size);
  }

@ -205,7 +205,7 @@ blockquote {

 b,
 strong {
-  font-weight: $font-weight-bolder;
+  font-weight: $fw-bolder;
 }


--- a/common/static/common/styles/vendor/bootstrap/_root.scss
+++ b/common/static/common/styles/vendor/bootstrap/_root.scss
@ -37,12 +37,12 @@
  // Root and body
  // stylelint-disable custom-property-empty-line-before
  // scss-docs-start root-body-variables
-  @if $font-size-root != null {
-    --#{$variable-prefix}root-font-size: #{$font-size-root};
+  @if $fs-root != null {
+    --#{$variable-prefix}root-font-size: #{$fs-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
-  --#{$variable-prefix}body-font-size: #{$font-size-base};
-  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
+  --#{$variable-prefix}body-font-size: #{$fs-base};
+  --#{$variable-prefix}body-font-weight: #{$fw-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
--- a/common/static/common/styles/vendor/bootstrap/_toasts.scss
+++ b/common/static/common/styles/vendor/bootstrap/_toasts.scss
@ -4,7 +4,7 @@
  @include font-size($toast-font-size);
  color: $toast-color;
  pointer-events: auto;
-  background-color: $toast-background-color;
+  background-color: $toast-bg-color;
  background-clip: padding-box;
  border: $toast-border-width solid $toast-border-color;
  box-shadow: $toast-box-shadow;
@ -34,7 +34,7 @@
  align-items: center;
  padding: $toast-padding-y $toast-padding-x;
  color: $toast-header-color;
-  background-color: $toast-header-background-color;
+  background-color: $toast-header-bg-color;
  background-clip: padding-box;
  border-bottom: $toast-border-width solid $toast-header-border-color;
  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
--- a/common/static/common/styles/vendor/bootstrap/_utilities.scss
+++ b/common/static/common/styles/vendor/bootstrap/_utilities.scss
@ -459,11 +459,11 @@ $utilities: map-merge(
      property: font-weight,
      class: fw,
      values: (
-        light: $font-weight-light,
-        lighter: $font-weight-lighter,
-        normal: $font-weight-normal,
-        bold: $font-weight-bold,
-        bolder: $font-weight-bolder
+        light: $fw-light,
+        lighter: $fw-lighter,
+        normal: $fw-normal,
+        bold: $fw-bold,
+        bolder: $fw-bolder
      )
    ),
    "line-height": (
@ -565,7 +565,7 @@ $utilities: map-merge(
    ),
    // scss-docs-end utils-bg-color
    "gradient": (
-      property: background-image,
+      property: background-img,
      class: bg,
      values: (gradient: var(--#{$variable-prefix}gradient))
    ),
--- a/common/static/common/styles/vendor/bootstrap/_variables.scss
+++ b/common/static/common/styles/vendor/bootstrap/_variables.scss
@ -580,31 +580,31 @@ $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
 $font-family-code:            var(--#{$variable-prefix}font-monospace) !default;

-// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
-// $font-size-base affects the font size of the body text
-$font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;
-$font-size-lg:                $font-size-base * 1.25 !default;
+// $fs-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $fs-base affects the font size of the body text
+$fs-root:              null !default;
+$fs-base:              1rem !default; // Assumes the browser default, typically `16px`
+$fs-sm:                $fs-base * .875 !default;
+$fs-lg:                $fs-base * 1.25 !default;

-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
+$fw-lighter:         lighter !default;
+$fw-light:           300 !default;
+$fw-normal:          400 !default;
+$fw-bold:            700 !default;
+$fw-bolder:          bolder !default;

-$font-weight-base:            $font-weight-normal !default;
+$fw-base:            $fw-normal !default;

 $line-height-base:            1.5 !default;
 $line-height-sm:              1.25 !default;
 $line-height-lg:              2 !default;

-$h1-font-size:                $font-size-base * 2.5 !default;
-$h2-font-size:                $font-size-base * 2 !default;
-$h3-font-size:                $font-size-base * 1.75 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
-$h6-font-size:                $font-size-base !default;
+$h1-font-size:                $fs-base * 2.5 !default;
+$h2-font-size:                $fs-base * 2 !default;
+$h3-font-size:                $fs-base * 1.75 !default;
+$h4-font-size:                $fs-base * 1.5 !default;
+$h5-font-size:                $fs-base * 1.25 !default;
+$h6-font-size:                $fs-base !default;
 // scss-docs-end font-variables

 // scss-docs-start font-sizes
@ -641,7 +641,7 @@ $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings

 // scss-docs-start type-variables
-$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-size:              $fs-base * 1.25 !default;
 $lead-font-weight:            300 !default;

 $small-font-size:             .875em !default;
@ -653,7 +653,7 @@ $text-muted:                  $gray-600 !default;
 $initialism-font-size:        $small-font-size !default;

 $blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-base * 1.25 !default;
+$blockquote-font-size:        $fs-base * 1.25 !default;
 $blockquote-footer-color:     $gray-600 !default;
 $blockquote-footer-font-size: $small-font-size !default;

@ -668,9 +668,9 @@ $legend-font-weight:          null !default;

 $mark-padding:                .2em !default;

-$dt-font-weight:              $font-weight-bold !default;
+$dt-font-weight:              $fw-bold !default;

-$nested-kbd-font-weight:      $font-weight-bold !default;
+$nested-kbd-font-weight:      $fw-bold !default;

 $list-inline-padding:         .5rem !default;

@ -743,7 +743,7 @@ $table-variants: (
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
 $input-btn-font-family:       null !default;
-$input-btn-font-size:         $font-size-base !default;
+$input-btn-font-size:         $fs-base !default;
 $input-btn-line-height:       $line-height-base !default;

 $input-btn-focus-width:         .25rem !default;
@ -754,11 +754,11 @@ $input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width

 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
-$input-btn-font-size-sm:      $font-size-sm !default;
+$input-btn-fs-sm:      $fs-sm !default;

 $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
-$input-btn-font-size-lg:      $font-size-lg !default;
+$input-btn-fs-lg:      $fs-lg !default;

 $input-btn-border-width:      $border-width !default;
 // scss-docs-end input-btn-variables
@ -778,15 +778,15 @@ $btn-white-space:             null !default; // Set to `nowrap` to prevent text

 $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
 $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-fs-sm:            $input-btn-fs-sm !default;

 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-fs-lg:            $input-btn-fs-lg !default;

 $btn-border-width:            $input-btn-border-width !default;

-$btn-font-weight:             $font-weight-normal !default;
+$btn-font-weight:             $fw-normal !default;
 $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-focus-width:             $input-btn-focus-width !default;
 $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
@ -838,16 +838,16 @@ $input-padding-y:                       $input-btn-padding-y !default;
 $input-padding-x:                       $input-btn-padding-x !default;
 $input-font-family:                     $input-btn-font-family !default;
 $input-font-size:                       $input-btn-font-size !default;
-$input-font-weight:                     $font-weight-base !default;
+$input-font-weight:                     $fw-base !default;
 $input-line-height:                     $input-btn-line-height !default;

 $input-padding-y-sm:                    $input-btn-padding-y-sm !default;
 $input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    $input-btn-font-size-sm !default;
+$input-fs-sm:                    $input-btn-fs-sm !default;

 $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-$input-font-size-lg:                    $input-btn-font-size-lg !default;
+$input-fs-lg:                    $input-btn-fs-lg !default;

 $input-bg:                              $body-bg !default;
 $input-disabled-bg:                     $gray-200 !default;
@ -888,7 +888,7 @@ $form-color-width:                      3rem !default;

 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
-$form-check-min-height:                   $font-size-base * $line-height-base !default;
+$form-check-min-height:                   $fs-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  null !default;
@ -907,13 +907,13 @@ $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 $form-check-input-checked-color:          $component-active-color !default;
 $form-check-input-checked-bg-color:       $component-active-bg !default;
 $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
+$form-check-input-checked-bg-img:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
+$form-check-radio-checked-bg-img:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;

 $form-check-input-indeterminate-color:          $component-active-color !default;
 $form-check-input-indeterminate-bg-color:       $component-active-bg !default;
 $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
+$form-check-input-indeterminate-bg-img:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;

 $form-check-input-disabled-opacity:        .5 !default;
 $form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
@ -926,15 +926,15 @@ $form-check-inline-margin-end:    1rem !default;
 $form-switch-color:               rgba($black, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
-$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-bg-img:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
 $form-switch-transition:          background-position .15s ease-in-out !default;

 $form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+$form-switch-focus-bg-img:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

 $form-switch-checked-color:       $component-active-color !default;
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-img:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 // scss-docs-end form-switch-variables

@ -952,7 +952,7 @@ $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
 $form-select-font-size:             $input-font-size !default;
-$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
+$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-img
 $form-select-font-weight:           $input-font-weight !default;
 $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
@ -980,12 +980,12 @@ $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focu

 $form-select-padding-y-sm:        $input-padding-y-sm !default;
 $form-select-padding-x-sm:        $input-padding-x-sm !default;
-$form-select-font-size-sm:        $input-font-size-sm !default;
+$form-select-fs-sm:        $input-fs-sm !default;
 $form-select-border-radius-sm:    $input-border-radius-sm !default;

 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
-$form-select-font-size-lg:        $input-font-size-lg !default;
+$form-select-fs-lg:        $input-fs-lg !default;
 $form-select-border-radius-lg:    $input-border-radius-lg !default;

 $form-select-transition:          $input-transition !default;
@ -1110,16 +1110,16 @@ $navbar-padding-x:                  null !default;

 $navbar-nav-link-padding-x:         .5rem !default;

-$navbar-brand-font-size:            $font-size-lg !default;
+$navbar-brand-font-size:            $fs-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$nav-link-height:                   $fs-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
 $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
 $navbar-brand-margin-end:           1rem !default;

 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-font-size:          $fs-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 $navbar-toggler-focus-width:        $btn-focus-width !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
@ -1156,7 +1156,7 @@ $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
+$dropdown-font-size:                $fs-base !default;
 $dropdown-color:                    $body-color !default;
 $dropdown-bg:                       $white !default;
 $dropdown-border-color:             rgba($black, .15) !default;
@ -1308,7 +1308,7 @@ $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w
 // Tooltips

 // scss-docs-start tooltip-variables
-$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-font-size:                 $fs-sm !default;
 $tooltip-max-width:                 200px !default;
 $tooltip-color:                     $white !default;
 $tooltip-bg:                        $black !default;
@ -1337,7 +1337,7 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 // Popovers

 // scss-docs-start popover-variables
-$popover-font-size:                 $font-size-sm !default;
+$popover-font-size:                 $fs-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
@ -1371,7 +1371,7 @@ $toast-padding-x:                   .75rem !default;
 $toast-padding-y:                   .5rem !default;
 $toast-font-size:                   .875rem !default;
 $toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
+$toast-bg-color:            rgba($white, .85) !default;
 $toast-border-width:                1px !default;
 $toast-border-color:                rgba($black, .1) !default;
 $toast-border-radius:               $border-radius !default;
@ -1379,7 +1379,7 @@ $toast-box-shadow:                  $box-shadow !default;
 $toast-spacing:                     $container-padding-x !default;

 $toast-header-color:                $gray-600 !default;
-$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-bg-color:     rgba($white, .85) !default;
 $toast-header-border-color:         rgba($black, .05) !default;
 // scss-docs-end toast-variables

@ -1388,7 +1388,7 @@ $toast-header-border-color:         rgba($black, .05) !default;

 // scss-docs-start badge-variables
 $badge-font-size:                   .75em !default;
-$badge-font-weight:                 $font-weight-bold !default;
+$badge-font-weight:                 $fw-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
@ -1448,7 +1448,7 @@ $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           $border-radius !default;
-$alert-link-font-weight:        $font-weight-bold !default;
+$alert-link-font-weight:        $fw-bold !default;
 $alert-border-width:            $border-width !default;
 $alert-bg-scale:                -80% !default;
 $alert-border-scale:            -70% !default;
@ -1461,7 +1461,7 @@ $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers widt

 // scss-docs-start progress-variables
 $progress-height:                   1rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
+$progress-font-size:                $fs-base * .75 !default;
 $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
 $progress-box-shadow:               $box-shadow-inset !default;
--- a/common/static/common/styles/vendor/bootstrap/forms/_form-check.scss
+++ b/common/static/common/styles/vendor/bootstrap/forms/_form-check.scss
@ -53,17 +53,17 @@

    &[type="checkbox"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-input-checked-bg-img), var(--#{$variable-prefix}gradient);
      } @else {
-        background-image: escape-svg($form-check-input-checked-bg-image);
+        background-image: escape-svg($form-check-input-checked-bg-img);
      }
    }

    &[type="radio"] {
      @if $enable-gradients {
-        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-check-radio-checked-bg-img), var(--#{$variable-prefix}gradient);
      } @else {
-        background-image: escape-svg($form-check-radio-checked-bg-image);
+        background-image: escape-svg($form-check-radio-checked-bg-img);
      }
    }
  }
@ -73,9 +73,9 @@
    border-color: $form-check-input-indeterminate-border-color;

    @if $enable-gradients {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
+      background-image: escape-svg($form-check-input-indeterminate-bg-img), var(--#{$variable-prefix}gradient);
    } @else {
-      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      background-image: escape-svg($form-check-input-indeterminate-bg-img);
    }
  }

@ -110,22 +110,22 @@
  .form-check-input {
    width: $form-switch-width;
    margin-left: $form-switch-padding-start * -1;
-    background-image: escape-svg($form-switch-bg-image);
+    background-image: escape-svg($form-switch-bg-img);
    background-position: left center;
    @include border-radius($form-switch-border-radius);
    @include transition($form-switch-transition);

    &:focus {
-      background-image: escape-svg($form-switch-focus-bg-image);
+      background-image: escape-svg($form-switch-focus-bg-img);
    }

    &:checked {
      background-position: $form-switch-checked-bg-position;

      @if $enable-gradients {
-        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
+        background-image: escape-svg($form-switch-checked-bg-img), var(--#{$variable-prefix}gradient);
      } @else {
-        background-image: escape-svg($form-switch-checked-bg-image);
+        background-image: escape-svg($form-switch-checked-bg-img);
      }
    }
  }
--- a/common/static/common/styles/vendor/bootstrap/forms/_form-control.scss
+++ b/common/static/common/styles/vendor/bootstrap/forms/_form-control.scss
@ -144,7 +144,7 @@
 .form-control-sm {
  min-height: $input-height-sm;
  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
+  @include font-size($input-fs-sm);
  @include border-radius($input-border-radius-sm);

  &::file-selector-button {
@ -163,7 +163,7 @@
 .form-control-lg {
  min-height: $input-height-lg;
  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
+  @include font-size($input-fs-lg);
  @include border-radius($input-border-radius-lg);

  &::file-selector-button {
--- a/common/static/common/styles/vendor/bootstrap/forms/_form-select.scss
+++ b/common/static/common/styles/vendor/bootstrap/forms/_form-select.scss
@ -58,7 +58,7 @@
  padding-top: $form-select-padding-y-sm;
  padding-bottom: $form-select-padding-y-sm;
  padding-left: $form-select-padding-x-sm;
-  @include font-size($form-select-font-size-sm);
+  @include font-size($form-select-fs-sm);
  @include border-radius($form-select-border-radius-sm);
 }

@ -66,6 +66,6 @@
  padding-top: $form-select-padding-y-lg;
  padding-bottom: $form-select-padding-y-lg;
  padding-left: $form-select-padding-x-lg;
-  @include font-size($form-select-font-size-lg);
+  @include font-size($form-select-fs-lg);
  @include border-radius($form-select-border-radius-lg);
 }
--- a/common/static/common/styles/vendor/bootstrap/forms/_input-group.scss
+++ b/common/static/common/styles/vendor/bootstrap/forms/_input-group.scss
@ -68,7 +68,7 @@
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
+  @include font-size($input-fs-lg);
  @include border-radius($input-border-radius-lg);
 }

@ -77,7 +77,7 @@
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
+  @include font-size($input-fs-sm);
  @include border-radius($input-border-radius-sm);
 }

--- a/common/static/common/styles/vendor/bootstrap/forms/_labels.scss
+++ b/common/static/common/styles/vendor/bootstrap/forms/_labels.scss
@ -26,11 +26,11 @@
 .col-form-label-lg {
  padding-top: add($input-padding-y-lg, $input-border-width);
  padding-bottom: add($input-padding-y-lg, $input-border-width);
-  @include font-size($input-font-size-lg);
+  @include font-size($input-fs-lg);
 }

 .col-form-label-sm {
  padding-top: add($input-padding-y-sm, $input-border-width);
  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
+  @include font-size($input-fs-sm);
 }
--- a/common/static/common/styles/vendor/bootstrap/mixins/_buttons.scss
+++ b/common/static/common/styles/vendor/bootstrap/mixins/_buttons.scss
@ -8,15 +8,15 @@
  $background,
  $border,
  $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-bg: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
-  $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $hover-color: color-contrast($hover-bg),
+  $active-bg: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
-  $active-color: color-contrast($active-background),
-  $disabled-background: $background,
+  $active-color: color-contrast($active-bg),
+  $disabled-bg: $background,
  $disabled-border: $border,
-  $disabled-color: color-contrast($disabled-background)
+  $disabled-color: color-contrast($disabled-bg)
 ) {
  color: $color;
  @include gradient-bg($background);
@ -25,14 +25,14 @@

  &:hover {
    color: $hover-color;
-    @include gradient-bg($hover-background);
+    @include gradient-bg($hover-bg);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
-    @include gradient-bg($hover-background);
+    @include gradient-bg($hover-bg);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
@ -48,7 +48,7 @@
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
-    background-color: $active-background;
+    background-color: $active-bg;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;
@ -66,7 +66,7 @@
  &:disabled,
  &.disabled {
    color: $disabled-color;
-    background-color: $disabled-background;
+    background-color: $disabled-bg;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
@ -78,16 +78,16 @@
@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
-  $active-background: $color,
+  $active-bg: $color,
  $active-border: $color,
-  $active-color: color-contrast($active-background)
+  $active-color: color-contrast($active-bg)
 ) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
-    background-color: $active-background;
+    background-color: $active-bg;
    border-color: $active-border;
  }

@ -102,7 +102,7 @@
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
-    background-color: $active-background;
+    background-color: $active-bg;
    border-color: $active-border;

    &:focus {
--- a/common/static/common/styles/vendor/bootstrap/mixins/_reset-text.scss
+++ b/common/static/common/styles/vendor/bootstrap/mixins/_reset-text.scss
@ -2,7 +2,7 @@
  font-family: $font-family-base;
  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
  font-style: normal;
-  font-weight: $font-weight-normal;
+  font-weight: $fw-normal;
  line-height: $line-height-base;
  text-align: left; // Fallback for where `start` is not supported
  text-align: start;
--- a/common/static/common/styles/vendor/plyr/base.scss
+++ b/common/static/common/styles/vendor/plyr/base.scss
@ -9,7 +9,7 @@
    direction: ltr;
    font-family: $plyr-font-family;
    font-variant-numeric: tabular-nums; // Force monosace-esque number widths
-    font-weight: $plyr-font-weight-regular;
+    font-weight: $plyr-fw-regular;
    line-height: $plyr-line-height;
    max-width: 100%;
    min-width: 200px;
--- a/common/static/common/styles/vendor/plyr/components/badges.scss
+++ b/common/static/common/styles/vendor/plyr/components/badges.scss
@ -6,7 +6,7 @@
    background: $plyr-badge-bg;
    border-radius: 2px;
    color: $plyr-badge-color;
-    font-size: $plyr-font-size-badge;
+    font-size: $plyr-fs-badge;
    line-height: 1;
    padding: 3px 4px;
 }
--- a/common/static/common/styles/vendor/plyr/components/captions.scss
+++ b/common/static/common/styles/vendor/plyr/components/captions.scss
@ -12,7 +12,7 @@
    bottom: 0;
    color: $plyr-captions-color;
    display: none;
-    font-size: $plyr-font-size-captions-small;
+    font-size: $plyr-fs-captions-sm;
    left: 0;
    padding: $plyr-control-spacing;
    position: absolute;
@ -39,12 +39,12 @@
    }

    @media (min-width: $plyr-bp-sm) {
-        font-size: $plyr-font-size-captions-base;
+        font-size: $plyr-fs-captions-base;
        padding: ($plyr-control-spacing * 2);
    }

    @media (min-width: $plyr-bp-md) {
-        font-size: $plyr-font-size-captions-medium;
+        font-size: $plyr-fs-captions-md;
    }
 }

--- a/common/static/common/styles/vendor/plyr/components/menus.scss
+++ b/common/static/common/styles/vendor/plyr/components/menus.scss
@ -29,7 +29,7 @@
        bottom: 100%;
        box-shadow: $plyr-menu-shadow;
        color: $plyr-menu-color;
-        font-size: $plyr-font-size-base;
+        font-size: $plyr-fs-base;
        margin-bottom: 10px;
        position: absolute;
        right: -3px;
@ -73,7 +73,7 @@
            align-items: center;
            color: $plyr-menu-color;
            display: flex;
-            font-size: $plyr-font-size-menu;
+            font-size: $plyr-fs-menu;
            padding: ceil($plyr-control-padding / 2)
                ceil($plyr-control-padding * 1.5);
            user-select: none;
@ -109,7 +109,7 @@

            &--back {
                $horizontal-padding: ($plyr-control-padding * 2);
-                font-weight: $plyr-font-weight-regular;
+                font-weight: $plyr-fw-regular;
                margin: $plyr-control-padding;
                margin-bottom: floor($plyr-control-padding / 2);
                padding-left: ceil($plyr-control-padding * 4);
--- a/common/static/common/styles/vendor/plyr/components/progress.scss
+++ b/common/static/common/styles/vendor/plyr/components/progress.scss
@ -24,7 +24,7 @@ $plyr-progress-offset: $plyr-range-thumb-height;

    // Seek tooltip to show time
    .plyr__tooltip {
-        font-size: $plyr-font-size-time;
+        font-size: $plyr-fs-time;
        left: 0;
    }
 }
--- a/common/static/common/styles/vendor/plyr/components/times.scss
+++ b/common/static/common/styles/vendor/plyr/components/times.scss
@ -3,7 +3,7 @@
 // --------------------------------------------------------------

 .plyr__time {
-    font-size: $plyr-font-size-time;
+    font-size: $plyr-fs-time;
 }

 // Media duration hidden on small screens
--- a/common/static/common/styles/vendor/plyr/components/tooltips.scss
+++ b/common/static/common/styles/vendor/plyr/components/tooltips.scss
@ -8,8 +8,8 @@
    bottom: 100%;
    box-shadow: $plyr-tooltip-shadow;
    color: $plyr-tooltip-color;
-    font-size: $plyr-font-size-small;
-    font-weight: $plyr-font-weight-regular;
+    font-size: $plyr-fs-sm;
+    font-weight: $plyr-fw-regular;
    left: 50%;
    line-height: 1.3;
    margin-bottom: ($plyr-tooltip-padding * 2);
--- a/common/static/common/styles/vendor/plyr/lib/mixins.scss
+++ b/common/static/common/styles/vendor/plyr/lib/mixins.scss
@ -90,7 +90,7 @@
    // Large captions in full screen on larger screens
    @media (min-width: $plyr-bp-lg) {
        .plyr__captions {
-            font-size: $plyr-font-size-captions-large;
+            font-size: $plyr-fs-captions-lg;
        }
    }
 }
--- a/common/static/common/styles/vendor/plyr/plugins/preview-thumbnails.scss
+++ b/common/static/common/styles/vendor/plyr/plugins/preview-thumbnails.scss
@ -7,8 +7,8 @@ $plyr-preview-bg: $plyr-tooltip-bg !default;
 $plyr-preview-radius: $plyr-tooltip-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-bg: $plyr-color-gray-2 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-img-bg: $plyr-color-gray-2 !default;
+$plyr-preview-time-font-size: $plyr-fs-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
 $plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
 $plyr-preview-time-color: #fff;
@ -50,7 +50,7 @@ $plyr-preview-time-bottom-offset: 6px;
    }

    &__image-container {
-        background: $plyr-preview-image-bg;
+        background: $plyr-preview-img-bg;
        border-radius: ($plyr-preview-radius - 1px);
        overflow: hidden;
        position: relative;
--- a/common/static/common/styles/vendor/plyr/settings/captions.scss
+++ b/common/static/common/styles/vendor/plyr/settings/captions.scss
@ -4,7 +4,7 @@

 $plyr-captions-bg: rgba(#000, 0.8) !default;
 $plyr-captions-color: #fff !default;
-$plyr-font-size-captions-base: $plyr-font-size-base !default;
-$plyr-font-size-captions-small: $plyr-font-size-small !default;
-$plyr-font-size-captions-medium: $plyr-font-size-large !default;
-$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
+$plyr-fs-captions-base: $plyr-fs-base !default;
+$plyr-fs-captions-sm: $plyr-fs-sm !default;
+$plyr-fs-captions-md: $plyr-fs-lg !default;
+$plyr-fs-captions-lg: $plyr-fs-xlarge !default;
--- a/common/static/common/styles/vendor/plyr/settings/type.scss
+++ b/common/static/common/styles/vendor/plyr/settings/type.scss
@ -3,17 +3,17 @@
 // ==========================================================================

 $plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-base: 16px !default;
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-large: 18px !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-fs-base: 16px !default;
+$plyr-fs-sm: 14px !default;
+$plyr-fs-lg: 18px !default;
+$plyr-fs-xlarge: 21px !default;

-$plyr-font-size-time: $plyr-font-size-small !default;
-$plyr-font-size-badge: 9px !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-fs-time: $plyr-fs-sm !default;
+$plyr-fs-badge: 9px !default;
+$plyr-fs-menu: $plyr-fs-sm !default;

-$plyr-font-weight-regular: 500 !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-fw-regular: 500 !default;
+$plyr-fw-bold: 600 !default;

 $plyr-line-height: 1.7 !default;

--- a/common/templates/common/base.html
+++ b/common/templates/common/base.html
@ -2,7 +2,7 @@
 {% load static %}
 {% load common_extras %}
 <!DOCTYPE html>
-<html lang="en">
+<html data-theme="dark" lang="en">

  <head>
    <meta charset="utf-8">
--- a/common/templates/common/components/attachments/file_image.html
+++ b/common/templates/common/components/attachments/file_image.html
@ -9,7 +9,7 @@
    {% endif %}
    {% if zoom %}
      <div class="end-0 mt-3 position-absolute top-0">
-        <button class="btn btn-link image-zoom me-1 mt-1" data-image="{{ static_asset.source.url }}">
+        <button class="btn btn-link image-zoom me-1 mt-1" data-img="{{ static_asset.source.url }}">
          <i class="i-zoom-in"></i>
        </button>
      </div>
@ -24,7 +24,7 @@
      </a>
      {% if zoom %}
        <div class="end-0 mt-3 position-absolute top-0">
-          <button class="btn btn-link image-zoom me-1 mt-1" data-image="{{ static_asset.source.url }}">
+          <button class="btn btn-link image-zoom me-1 mt-1" data-img="{{ static_asset.source.url }}">
            <i class="i-zoom-in"></i>
          </button>
        </div>
@ -35,7 +35,7 @@
      {% include "common/components/helpers/image_set.html" with alt=static_asset.original_filename classes=classes img_source=static_asset.source xsmall_width="600" small_width="740" medium_width="740" large_width="940" xlarge_width="940" %}
      {% if zoom %}
        <div class="end-0 mt-3 position-absolute top-0">
-          <button class="btn btn-link image-zoom me-1 mt-1" data-image="{{ static_asset.source.url }}">
+          <button class="btn btn-link image-zoom me-1 mt-1" data-img="{{ static_asset.source.url }}">
            <i class="i-zoom-in"></i>
          </button>
        </div>
--- a/common/templates/common/components/cards/card_blog.html
+++ b/common/templates/common/components/cards/card_blog.html
@ -1,22 +1,22 @@
 {% load common_extras %}

-<div class="cards-list-item-outer {{ card_sizes }}">
-  <a aria-label="{{ post.title }}" class="cards-list-item-inner text-decoration-none" href="{% url 'post-detail' slug=post.slug %}">
-    <div class="cards-list-item-thumbnail">
+<div class="cards-item {{ card_sizes }}">
+  <a aria-label="{{ post.title }}" class="cards-item-content text-decoration-none" href="{% url 'post-detail' slug=post.slug %}">
+    <div class="cards-item-thumbnail">
      <img src="{{ post.thumbnail_s_url }}" alt="{{ post.title }}">
    </div>
-    <h3 class="cards-list-item-title">
+    <h3 class="cards-item-title">
      {% if post.is_new and post.is_published %}
        <span class="badge badge-primary">New</span>
      {% endif %}
      {{ post.title }}
    </h3>
-    <div class="cards-list-item-excerpt">
+    <div class="cards-item-excerpt">
      <p>
        {{ post.excerpt }}
      </p>
    </div>
-    <div class="d-flex cards-list-item-extra">
+    <div class="d-flex cards-item-extra">
      {% if not post.is_published %}
        <span class="badge badge-danger me-2">Unpublished</span>
      {% else %}
--- a/common/templates/common/components/cards/card_training.html
+++ b/common/templates/common/components/cards/card_training.html
@ -1,10 +1,10 @@
-<div class="card-grid-item cards-list-item-outer position-relative">
-  <a class="cards-list-item-inner text-decoration-none" href="{{ training.url }}">
-    <div class="cards-list-item-thumbnail">
+<div class="card-grid-item cards-item position-relative">
+  <a class="cards-item-content text-decoration-none" href="{{ training.url }}">
+    <div class="cards-item-thumbnail">
      <img src="{{ training.thumbnail_s_url }}" alt="{{ training.title }}">
    </div>
-    <h3 class="cards-list-item-title">{{ training.name }}</h3>
-    <div class="cards-list-item-excerpt">
+    <h3 class="cards-item-title">{{ training.name }}</h3>
+    <div class="cards-item-excerpt">
      <p>
        {{ training.description }}
      </p>
@ -16,7 +16,7 @@
        {% endfor %}
      </div>
    {% endif %}
-    <div class="cards-list-item-extra">
+    <div class="cards-item-extra">
      <ul>
        <li>
          <i class="i-book-open"></i>
--- a/common/templates/common/components/file.html
+++ b/common/templates/common/components/file.html
@ -3,10 +3,10 @@
 {% load common_extras %}

 {# Classes 'file-*' and 'grid-*' are used by js #}
-<div class="cards-list-item-file cards-list-item-outer file grid-item {{ card_sizes|default:'col-12 col-sm-6 col-md-6 col-lg-4' }} {% if aspect_ratio == '16:9' %}widescreen{% elif aspect_ratio == '4:3' %}fourbythree{% elif aspect_ratio == '1:1' %}square{% endif %} {% if asset.is_spoiler or not user_can_view_asset and not asset.is_free  %}locked{% endif %}">
-  <a class="cards-list-item-inner file-modal-link" data-asset-id="{{ asset.id }}" data-url="{% url 'api-asset' asset.id %}?site_context={{ site_context }}">
+<div class="cards-item-file cards-item file grid-item {{ card_sizes|default:'col-12 col-sm-6 col-md-6 col-lg-4' }} {% if aspect_ratio == '16:9' %}widescreen{% elif aspect_ratio == '4:3' %}fourbythree{% elif aspect_ratio == '1:1' %}square{% endif %} {% if asset.is_spoiler or not user_can_view_asset and not asset.is_free  %}locked{% endif %}">
+  <a class="cards-item-content file-modal-link" data-asset-id="{{ asset.id }}" data-url="{% url 'api-asset' asset.id %}?site_context={{ site_context }}">
    <div class="mb-1 position-relative">
-      <div class="cards-list-item-thumbnail">
+      <div class="cards-item-thumbnail">
        {% if asset.static_asset.thumbnail %}
          {% if user_can_view_asset or asset.is_free %}
            {% if asset.is_spoiler %}
@ -61,7 +61,7 @@
        {% endif %}
      {% endif %}
    </div>
-    <h4 class="cards-list-item-title d-flex mb-0">
+    <h4 class="cards-item-title d-flex mb-0">
      <span data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ asset.name }}">
        <span class="overflow-text">{{ asset.name }}</span>
      </span>
--- a/common/templates/common/components/file_carousel.html
+++ b/common/templates/common/components/file_carousel.html
@ -1,12 +1,12 @@
 {% load static %}
 {% load thumbnail %}
 {# Class 'card-grid-item' is needed for js #}
-<div class="card-grid-item cards-list-item-outer {{ card_sizes|default:"col-12 col-sm-6 col-lg-3" }}">
-  <a aria-label="{{ film_asset.name }}" class="bg-transparent cards-list-item-inner file" href="{{ film_asset.url }}" data-asset-id="{{ film_asset.id }}" data-bs-tooltip="tooltip-overflow" data-placement="top" data-url="{% url 'api-asset' film_asset.id %}?site_context={{ site_context }}" title="{{ asset.name }}">
+<div class="card-grid-item cards-item {{ card_sizes|default:"col-12 col-sm-6 col-lg-3" }}">
+  <a aria-label="{{ film_asset.name }}" class="bg-transparent cards-item-content file" href="{{ film_asset.url }}" data-asset-id="{{ film_asset.id }}" data-bs-tooltip="tooltip-overflow" data-placement="top" data-url="{% url 'api-asset' film_asset.id %}?site_context={{ site_context }}" title="{{ asset.name }}">
    <div class="mb-1 position-relative">
-      <div class="cards-list-item-thumbnail">
+      <div class="cards-item-thumbnail">
        {% if film_asset.static_asset.thumbnail_s_url %}
-          <img class="file-image" src="{{ film_asset.static_asset.thumbnail_s_url }}" alt="{{ film_asset.name }}"/>
+          <img class="file-img" src="{{ film_asset.static_asset.thumbnail_s_url }}" alt="{{ film_asset.name }}"/>
        {% endif %}
        {% if asset.contains_blend_file %}
          <img class="file-icon" src="{% static "common/images/icons/blend.svg" %}" alt="{{ film_asset.name }}">
@ -25,6 +25,6 @@
        </div>
      {% endif %}
    </div>
-    <h3 class="cards-list-item-title oveflow-text">{{ film_asset.name }}</h3>
+    <h3 class="cards-item-title oveflow-text">{{ film_asset.name }}</h3>
  </a>
 </div>
--- a/common/templates/common/components/file_production_log.html
+++ b/common/templates/common/components/file_production_log.html
@ -1,10 +1,10 @@
 {% load static %}
 {% load common_extras %}

-<div class="cards-list-item-outer file grid-item {{ card_sizes|default:'col-12 col-sm-6 col-md-6 col-lg-4' }} {% if aspect_ratio == '16:9' %}widescreen{% elif aspect_ratio == '4:3' %}fourbythree{% elif aspect_ratio == '1:1' %}square{% endif %} {% if asset.is_spoiler or not user_can_view_asset and not asset.is_free  %}locked{% endif %}">
-  <a class="cards-list-item-inner file-modal-link" data-asset-id="{{ asset.id }}" data-url="{% url 'api-asset' asset.id %}?site_context={{ site_context }}">
+<div class="cards-item file grid-item {{ card_sizes|default:'col-12 col-sm-6 col-md-6 col-lg-4' }} {% if aspect_ratio == '16:9' %}widescreen{% elif aspect_ratio == '4:3' %}fourbythree{% elif aspect_ratio == '1:1' %}square{% endif %} {% if asset.is_spoiler or not user_can_view_asset and not asset.is_free  %}locked{% endif %}">
+  <a class="cards-item-content file-modal-link" data-asset-id="{{ asset.id }}" data-url="{% url 'api-asset' asset.id %}?site_context={{ site_context }}">
    <div class="mb-1 position-relative">
-      <div class="cards-list-item-thumbnail">
+      <div class="cards-item-thumbnail">
        {% if asset.static_asset.thumbnail %}
          {% if user_can_view_asset or asset.is_free %}
            {% if asset.is_spoiler %}
@ -59,7 +59,7 @@
        {% endif %}
      {% endif %}
    </div>
-    <h4 class="cards-list-item-title d-flex">
+    <h4 class="cards-item-title d-flex">
      <span class="me-1 overflow-text" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ asset.name }}">
        {{ asset.name }}
      </span>
@ -91,17 +91,17 @@
              <h4 class="mb-0"><i class="i-alert-triangle small text-danger"></i> Spoiler</h4>
            </div>

-            <img alt="{{ asset.name }}" class="file-image locked" src="{{ asset.static_asset.thumbnail_s_url }}">
+            <img alt="{{ asset.name }}" class="file-img locked" src="{{ asset.static_asset.thumbnail_s_url }}">

          {% else %}

            {% if large_thumbnail %}

-              <img alt="{{ asset.name }}" class="file-image" src="{{ asset.static_asset.thumbnail_m_url }}">
+              <img alt="{{ asset.name }}" class="file-img" src="{{ asset.static_asset.thumbnail_m_url }}">

            {% else %}

-              <img alt="{{ asset.name }}" class="file-image" src="{{ asset.static_asset.thumbnail_s_url }}">
+              <img alt="{{ asset.name }}" class="file-img" src="{{ asset.static_asset.thumbnail_s_url }}">

            {% endif %}

@ -111,7 +111,7 @@
            <h4 class="mb-0"><i class="i-lock small"></i> Subscribe to view</h4>
          </div>

-          <img alt="{{ asset.name }}" class="file-image locked" src="{{ asset.static_asset.thumbnail_s_url }}">
+          <img alt="{{ asset.name }}" class="file-img locked" src="{{ asset.static_asset.thumbnail_s_url }}">

        {% endif %}
        {% if asset.contains_blend_file %}
--- a/common/templates/common/components/file_section.html
+++ b/common/templates/common/components/file_section.html
@ -2,12 +2,12 @@
 {% load thumbnail %}
 {% load common_extras %}

-<div class="cards-list-item-outer file grid-item {{ card_sizes|default:"col-12 col-sm-6 col-md-6 col-lg-4" }}">
-  <a class="cards-list-item-inner" href="{{ section.url }}">
+<div class="cards-item file grid-item {{ card_sizes|default:"col-12 col-sm-6 col-md-6 col-lg-4" }}">
+  <a class="cards-item-content" href="{{ section.url }}">
    <div class="position-relative">
-      <div class="cards-list-item-thumbnail">
+      <div class="cards-item-thumbnail">
        {% if section.thumbnail_s_url %}
-          <img class="file-image" src="{{ section.thumbnail_s_url }}" alt="{{ section.name }}" />
+          <img class="file-img" src="{{ section.thumbnail_s_url }}" alt="{{ section.name }}" />
        {% endif %}
      </div>
      {% if section.static_asset.source|endswith:".blend" %}
@ -20,7 +20,7 @@
        </div>
      {% endif %}
    </div>
-    <div class="cards-list-item-title" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ section.name }}">
+    <div class="cards-item-title" data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ section.name }}">
      {% if section.is_free %}
        {% include "common/components/cards/pill.html" with label='Free' %}
      {% endif %}
--- a/common/templates/common/components/folder.html
+++ b/common/templates/common/components/folder.html
@ -2,10 +2,10 @@
 {% load thumbnail %}
 {% load common_extras %}

-<div class="cards-list-item-outer file grid-item {{ card_sizes|default:"col-12 col-sm-6 col-md-6 col-lg-4" }} {% if aspect_ratio == "16:9" %}widescreen{% elif aspect_ratio == "4:3" %}fourbythree{% elif aspect_ratio == "1:1" %}square{% endif %}">
-  <a class="cards-list-item-inner" href="{{ child_collection.url }}">
+<div class="cards-item file grid-item {{ card_sizes|default:"col-12 col-sm-6 col-md-6 col-lg-4" }} {% if aspect_ratio == "16:9" %}widescreen{% elif aspect_ratio == "4:3" %}fourbythree{% elif aspect_ratio == "1:1" %}square{% endif %}">
+  <a class="cards-item-content" href="{{ child_collection.url }}">
    <div class="position-relative">
-      <div class="cards-list-item-thumbnail {% if not child_collection.thumbnail %}bg-tertiary ratio-16x9{% endif %}">
+      <div class="cards-item-thumbnail {% if not child_collection.thumbnail %}bg-tertiary ratio-16x9{% endif %}">
        {% if child_collection.thumbnail %}
          <img alt="Collection preview" src="{{ child_collection.thumbnail.url }}">
        {% else %}
@ -18,6 +18,6 @@
        <img class="file-icon" src="{% static "common/images/icons/folder.svg" %}" alt="Folder Icon">
      {% endif %}
    </div>
-    <h4 class="cards-list-item-title">{{ child_collection.name }}</h4>
+    <h4 class="cards-item-title">{{ child_collection.name }}</h4>
  </a>
 </div>
--- a/common/templates/common/components/home_headers/film_general_left.html
+++ b/common/templates/common/components/home_headers/film_general_left.html
@ -17,8 +17,8 @@
      </div>
    </div>
  </div>
-  {% static 'common/images/home/header-background.jpg' as header_default %}
-  <div class="hero-background" style="background-image: url('{% firstof frontpage_header.url header_default %}'); background-position-y: 50%"></div>
+  {% static 'common/images/home/header-bg.jpg' as header_default %}
+  <div class="hero-bg" style="background-image: url('{% firstof frontpage_header.url header_default %}'); background-position-y: 50%"></div>
  <div class="hero-overlay"></div>
  <div class="hero-overlay-gradient"></div>
 </div>
--- a/common/templates/common/components/modal_asset.html
+++ b/common/templates/common/components/modal_asset.html
@ -51,7 +51,7 @@
              {% endif %}
            {% elif asset.static_asset.thumbnail %}
              {# Class 'zoom-modal-link' is needed for js #}
-              <a class="modal-asset-image-wrapper zoom-modal-link"
+              <a class="modal-asset-img-wrapper zoom-modal-link"
                data-url="{% url 'api-asset-zoom' asset.id %}">
                {% include "common/components/helpers/image_resize.html" with alt=asset.name classes="img-fluid" img_source=asset.static_asset.thumbnail width="780" %}
              </a>
@ -131,7 +131,7 @@
            {% endwith %}

            {# TODO: Check style 'text-sm' #}
-            <div class="align-items-end col d-flex flex-column justify-content-end text-muted text-sm x-small">
+            <div class="align-items-end col d-flex flex-column justify-content-end text-muted text-sm x-sm">
              <div class="d-flex">
                <div class="me-2">
                  {{ asset.static_asset.get_source_type_display }}
--- a/common/templates/common/components/published_by.html
+++ b/common/templates/common/components/published_by.html
@ -1,11 +1,11 @@
 {# TODO: cleanup check if template is needed or referenced #}
 {% if static_asset.author %}
-  <p class="subtitle text-white-50 x-small">Author</p>
+  <p class="subtitle text-white-50 x-sm">Author</p>
  <h4 class="comment-name mb-0">{{ static_asset.author.full_name }}</h4>
 {% elif static_asset.user.full_name %}
-  <p class="subtitle text-white-50 x-small">Published by</p>
+  <p class="subtitle text-white-50 x-sm">Published by</p>
  <h4 class="comment-name mb-0">{{ static_asset.user.full_name }}</h4>
 {% elif fallback_user %}
-  <p class="subtitle text-white-50 x-small">Published by</p>
+  <p class="subtitle text-white-50 x-sm">Published by</p>
  <h4 class="comment-name mb-0">{{ fallback_user.full_name }}</h4>
 {% endif %}
--- a/common/templates/common/home.html
+++ b/common/templates/common/home.html
@ -35,7 +35,7 @@
            Blender Studio.</p>
        </div>
      </div>
-      <div class="card-layout-card-transparent cards-list cards-list-films">
+      <div class="card-layout-card-transparent cards cards-films">
        {% for featured_film in featured_films|slice:':3' %}
          {% include "films/components/card_film.html" with film=featured_film %}
        {% endfor %}
--- a/common/templates/common/welcome.html
+++ b/common/templates/common/welcome.html
@ -31,7 +31,7 @@
      </div>
    </div>
    {% static 'common/images/welcome/welcome-header.jpg' as welcome_header_default %}
-    <div class="hero-background" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}'); background-position-y: 50%">
+    <div class="hero-bg" style="background-image: url('{% firstof welcome_header.url welcome_header_default %}'); background-position-y: 50%">
    </div>
    <div class="hero-overlay"></div>
    <div class="hero-overlay-gradient"></div>
@ -53,7 +53,7 @@
          </div>
        </div>
      </div>
-      <div class="cards-list card-layout-card-transparent">
+      <div class="cards card-layout-card-transparent">
        {% for training in featured_trainings|slice:':3' %}
          {% include "common/components/cards/card_training.html" with training=training %}
        {% endfor %}
@ -130,7 +130,7 @@
          </div>
        </div>
      </div>
-      <div class="card-layout-card-transparent cards-list cards-list-films">
+      <div class="card-layout-card-transparent cards cards-films">
        {% for featured_film in featured_films|slice:'1:4' %}
          {% if featured_film.is_published or request.user.is_superuser or request.user.is_staff %}
            {% include "films/components/card_film.html" with film=featured_film %}
@ -154,7 +154,7 @@
      <div class="container">
        <div class="row">
          <div class="col">
-            <div class="bg-center bg-cover box pb-5 pt-5 row position-relative" style="background-image: url('{% static "common/images/welcome/join-background.jpg" %}');">
+            <div class="bg-center bg-cover box pb-5 pt-5 row position-relative" style="background-image: url('{% static "common/images/welcome/join-bg.jpg" %}');">
              <div class="bg-overlay rounded-lg"></div>
              <div class="col"></div>
              <div class="col">
--- a/films/static/films/scripts/film_search.js
+++ b/films/static/films/scripts/film_search.js
@ -112,12 +112,12 @@ const renderHits = (renderOptions, isFirstRender) => {
        .map(
          (item) =>
            `
-            <div class="cards-list-item-outer col-12 col-lg-4 col-sm-6 file grid-item">
-              <a aria-label="${item.name}" href="${item.url}" class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item col-12 col-lg-4 col-sm-6 file grid-item">
+              <a aria-label="${item.name}" href="${item.url}" class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img aria-label="${item.name}" loading=lazy src="${item.thumbnail_url || fileIconURL}">
                </div>
-                <div class="cards-list-item-title overflow-text" data-tooltip="tooltip-overflow" data-placement="top" title="${item.name}">
+                <div class="cards-item-title overflow-text" data-tooltip="tooltip-overflow" data-placement="top" title="${item.name}">
                  <div class="overflow-text">
                    ${instantsearch.highlight({
                      attribute: 'name',
@ -125,10 +125,10 @@ const renderHits = (renderOptions, isFirstRender) => {
                    })}
                  </div>
                </div>
-                <div class="cards-list-item-extra">
+                <div class="cards-item-extra">
                  <ul>
                    <li>
-                      <i class="i-clock x-small"></i>&nbsp; ${timeDifference(epochToDate(item.timestamp))}
+                      <i class="i-clock x-sm"></i>&nbsp; ${timeDifference(epochToDate(item.timestamp))}
                    </li>
                    <li>
                      ${
--- a/films/templates/films/components/card_film.html
+++ b/films/templates/films/components/card_film.html
@ -1,9 +1,9 @@
-<div class="cards-list-item-film cards-list-item-outer">
-  <a aria-label="{{ post.title }}" class="cards-list-item-inner" href="{{ film.url }}">
-    <div class="cards-list-item-thumbnail">
+<div class="cards-item-film cards-item">
+  <a aria-label="{{ post.title }}" class="cards-item-content" href="{{ film.url }}">
+    <div class="cards-item-thumbnail">
      {% include "common/components/helpers/image_resize.html" with alt=film.title img_source=film.poster width="500" %}
    </div>
-    <h3 class="cards-list-item-title">
+    <h3 class="cards-item-title">
      <span class="me-2">{{ film.title }}</span>
      {% if film.status == "2_released" %}
        <span class="badge">
@ -15,7 +15,7 @@
        </span>
      {% endif %}
    </h3>
-    <div class="cards-list-item-excerpt">
+    <div class="cards-item-excerpt">
      <p>
        {{ film.description }}
      </p>
--- a/films/templates/films/components/jumbotron_film.html
+++ b/films/templates/films/components/jumbotron_film.html
@ -20,7 +20,7 @@
      </div>
    </div>
  </div>
-  <div class="hero-background" style="background-image: url('{{ film.picture_header.url }}'); background-position-y: 50%"></div>
+  <div class="hero-bg" style="background-image: url('{{ film.picture_header.url }}'); background-position-y: 50%"></div>
  <div class="hero-overlay"></div>
  <div class="hero-overlay-gradient"></div>
 </div>
--- a/films/templates/films/components/production_log_entry.html
+++ b/films/templates/films/components/production_log_entry.html
@ -102,7 +102,7 @@
            <div class="files">
              <div class="row">
                <div class="col">
-                  <div class="card-layout-card-transparent cards-list">
+                  <div class="card-layout-card-transparent cards">
                    {% for asset in entry.assets.all|slice:':3' %}
                      {% if asset.is_published %}
                        {% include "common/components/file.html" with card_sizes="col" aspect_ratio="16:9" asset=asset site_context="production_logs" %}
@ -112,7 +112,7 @@

                  {% if entry.assets.count > 3 %}
                    <div class="collapse" id="entry-{{ entry.id }}">
-                      <div class="card-layout-card-transparent cards-list">
+                      <div class="card-layout-card-transparent cards">
                        {% for asset in entry.assets.all|slice:'3:' %}
                          {% if asset.is_published %}
                            {% include "common/components/file.html" with card_sizes="col" aspect_ratio="16:9" asset=asset site_context="production_logs" %}
--- a/films/templates/films/film_landing_page.html
+++ b/films/templates/films/film_landing_page.html
@ -22,7 +22,7 @@

 {% block content %}
  <div class="hero hero-film-landing-page">
-    <div class="hero-background" style="background-image: url('{% static "films/images/sprite-fright/sprite-fright-clouds.png" %}'); background-position-y: 50%">
+    <div class="hero-bg" style="background-image: url('{% static "films/images/sprite-fright/sprite-fright-clouds.png" %}'); background-position-y: 50%">
    </div>
    <div class="hero-overlay"></div>
    <div class="hero-overlay-gradient"></div>
@ -135,87 +135,87 @@
      </div>
      <div class="row">
        <div class="col-md-12">
-          <div class="cards-list card-layout-card-transparent">
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+          <div class="cards card-layout-card-transparent">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/cloudrig.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/animcache.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/animsetup.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/contactsheet.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/kitsuaddon.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/animsetup.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/blenderpurge.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/cloudrig.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/contactsheet.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/kitsuaddon.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/blenderpurge.png' %}" alt="Animation Caching">
                </div>
              </div>
            </div>
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <div class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  <img src="{% static 'films/images/sprite-fright/cards/animcache.png' %}" alt="Animation Caching">
                </div>
              </div>
--- a/films/templates/films/films.html
+++ b/films/templates/films/films.html
@ -14,7 +14,7 @@
  <div class="container pt-4">
    {% include "common/components/simple_header.html" with title="Films" subtitle="The iconic Blender Open Movies. Featuring all the production files, assets, artwork, and never-seen-before content." %}

-    <div class="card-layout-card-transparent cards-list cards-list-films pt-5">
+    <div class="card-layout-card-transparent cards cards-films pt-5">
      {% for film in films %}
        {% if film.is_published or request.user.is_superuser or request.user.is_staff %}
          {% include "films/components/card_film.html" with film=film %}
--- a/playbooks/templates/nginx/errors/5xx.html
+++ b/playbooks/templates/nginx/errors/5xx.html
@ -32,7 +32,7 @@
      h1 {
        background: linear-gradient(to right, #0cc, violet);
        background-clip: text;
-        -webkit-background-clip: text;
+        -webkit-bg-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 300;
        font-size: 1.6em;
--- a/search/static/search/scripts/search.js
+++ b/search/static/search/scripts/search.js
@ -122,13 +122,13 @@ const renderHits = (renderOptions, isFirstRender) => {
        .map(
          (item) =>
            `
-<div class="card-grid-item cards-list-item-outer">
-  <a aria-label="${item.name}" class="cards-list-item-inner" href="${item.url}">
-    <div class="cards-list-item-thumbnail">
+<div class="card-grid-item cards-item">
+  <a aria-label="${item.name}" class="cards-item-content" href="${item.url}">
+    <div class="cards-item-thumbnail">
      <img alt="" aria-label="${item.name}" loading=lazy src="${item.thumbnail_url || fileIconURL}">
    </div>
-    <h3 class="cards-list-item-title">${instantsearch.highlight({ attribute: 'name', hit: item })}</h3>
-    <div class="cards-list-item-extra">
+    <h3 class="cards-item-title">${instantsearch.highlight({ attribute: 'name', hit: item })}</h3>
+    <div class="cards-item-extra">
      <ul>
        <li>
          <i class="i-tag"></i>&nbsp;
--- a/search/templates/search/search.html
+++ b/search/templates/search/search.html
@ -51,7 +51,7 @@
        </div>
      </div>
    </section>
-    <div class="cards-list card-layout-card-transparent" id="hits"></div>
+    <div class="cards card-layout-card-transparent" id="hits"></div>
  </div>
 {% endblock content %}

--- a/subscriptions/templates/checkout/checkout_base.html
+++ b/subscriptions/templates/checkout/checkout_base.html
@ -29,7 +29,7 @@
          <h1>Blender Studio</h1>
        </div>
      </div>
-      <div class="hero-background" style="background-image: url('{% static 'subscriptions/images/join-header.png' %}'); background-position-y: 50%">
+      <div class="hero-bg" style="background-image: url('{% static 'subscriptions/images/join-header.png' %}'); background-position-y: 50%">
      </div>
      <div class="hero-overlay"></div>
      <div class="hero-overlay-gradient"></div>
--- a/subscriptions/templates/checkout/checkout_done.html
+++ b/subscriptions/templates/checkout/checkout_done.html
@ -5,7 +5,7 @@
 {% block content %}
  {% with subscription=order.subscription %}
    <div class="hero hero-checkout">
-      <div class="hero-background" style="background-image: url('{% static 'subscriptions/images/join-header.png' %}'); background-position-y: 50%">
+      <div class="hero-bg" style="background-image: url('{% static 'subscriptions/images/join-header.png' %}'); background-position-y: 50%">
      </div>
      <div class="hero-overlay"></div>
      <div class="hero-overlay-gradient"></div>
@ -43,7 +43,7 @@
        </div>
        <div class="row">
          <div class="col-md-12">
-            <div class="card-layout-card-transparent cards-list cards-list-films">
+            <div class="card-layout-card-transparent cards cards-films">
              {% for film in featured.films|slice:':3' %}
                {% include "films/components/card_film.html" with film=film %}
              {% endfor %}
--- a/subscriptions/templates/subscriptions/components/current_plan_variation.html
+++ b/subscriptions/templates/subscriptions/components/current_plan_variation.html
@ -17,7 +17,7 @@
    </div>
    <div class="col text-end">
      <h2 class="mb-0"><span>{{ current_price.price.with_currency_symbol }}</span></h2>
-      <p class="text-muted x-small"><span>{{ current_price.format_tax_amount }}</span></p>
+      <p class="text-muted x-sm"><span>{{ current_price.format_tax_amount }}</span></p>
    </div>
  </div>
 </div>
--- a/subscriptions/templates/subscriptions/components/manage_team.html
+++ b/subscriptions/templates/subscriptions/components/manage_team.html
@ -10,7 +10,7 @@
      <div class=row>
        <div class="col">
          <p class="h3 mb-0">Team</p>
-          <p class="text-muted x-small">
+          <p class="text-muted x-sm">
            Manage your team by listing their individual team members' emails, or by setting a team email domain.
          </p>
        </div>
@ -19,7 +19,7 @@
        <div class=row>
          <div class="col">
            <p class="h4 mt-2 mb-0">Seats</p>
-            <p class="text-muted x-small">Maximum number of team members allowed for this subscription</p>
+            <p class="text-muted x-sm">Maximum number of team members allowed for this subscription</p>
          </div>
          <div class="col-auto small">
            {{ subscription.team.seats }}
@ -55,7 +55,7 @@
        <div class=row>
          <div class="col">
            <p class="h4 mb-0">Active team members</p>
-            <p class="text-muted x-small"></p>
+            <p class="text-muted x-sm"></p>
          </div>
          <div class="col-auto small">
            {% for user in subscription.team.users.all %}
--- a/subscriptions/templates/subscriptions/components/plan_selector.html
+++ b/subscriptions/templates/subscriptions/components/plan_selector.html
@ -66,7 +66,7 @@
      </div>
      <div class="mb-4 row">
        <div class="col">
-          <p class="text-muted mb-0 x-small">Required fields are marked with (*).</p>
+          <p class="text-muted mb-0 x-sm">Required fields are marked with (*).</p>
        </div>
      </div>
    </div>
--- a/subscriptions/templates/subscriptions/emails/paypal_subscription_cancelled.html
+++ b/subscriptions/templates/subscriptions/emails/paypal_subscription_cancelled.html
@ -27,7 +27,7 @@
      border-bottom-right-radius: 8px;
      border-bottom-style: solid;
      border-bottom-width: 0px;
-      border-image-source: none;
+      border-img-source: none;
      border-left-color: #009eff;
      border-left-style: solid;
      border-left-width: 0px;
--- a/subscriptions/templates/subscriptions/emails/subscription_expired.html
+++ b/subscriptions/templates/subscriptions/emails/subscription_expired.html
@ -30,7 +30,7 @@
      border-bottom-right-radius: 8px;
      border-bottom-style: solid;
      border-bottom-width: 0px;
-      border-image-source: none;
+      border-img-source: none;
      border-left-color: #009eff;
      border-left-style: solid;
      border-left-width: 0px;
--- a/subscriptions/templates/subscriptions/join/billing_address.html
+++ b/subscriptions/templates/subscriptions/join/billing_address.html
@ -29,7 +29,7 @@
            <fieldset>
              {% include "subscriptions/components/billing_address_form.html" %}
            </fieldset>
-            <p class="mb-0 text-muted x-small">Required fields are marked with (*).</p>
+            <p class="mb-0 text-muted x-sm">Required fields are marked with (*).</p>
          </section>
        </div>
        <div class="border-bottom border-1 mb-4 pb-2">
--- a/subscriptions/templates/subscriptions/manage.html
+++ b/subscriptions/templates/subscriptions/manage.html
@ -29,7 +29,7 @@
                <div class="row">
                  <div class="col">
                    <p class="h4 mb-0 text-danger">Subscription On Hold</p>
-                    <p class="text-muted x-small">Your subscription hasn't been paid for and is currently <strong>on-hold</strong>.
+                    <p class="text-muted x-sm">Your subscription hasn't been paid for and is currently <strong>on-hold</strong>.
                    </p>
                  </div>

@ -51,16 +51,16 @@
                      {% if subscription.next_payment %}
                        {% if subscription.status == 'active' or subscription.status == 'on-hold' %}
                          {% if subscription.next_payment_in_future %}
-                            <p class="text-muted x-small">Your subscription will renew
+                            <p class="text-muted x-sm">Your subscription will renew
                              {{ subscription.collection_method }}{% if subscription.collection_method == 'automatic' %}ally{% else %}ly{% endif %}
                              on
                              {{ subscription.next_payment|date }} for {{ subscription|recurring_pricing:taxable.price }}.</p>
                          {% else %}
-                            <p class="text-muted x-small">Your last {{ subscription.collection_method }} payment is due on
+                            <p class="text-muted x-sm">Your last {{ subscription.collection_method }} payment is due on
                              {{ subscription.next_payment|date }} for {{ subscription|recurring_pricing:taxable.price }}.</p>
                          {% endif %}
                        {% elif subscription.status == 'pending-cancellation' %}
-                          <p class="text-muted x-small">Your subscription is pending cancellation. It will be deactivated on
+                          <p class="text-muted x-sm">Your subscription is pending cancellation. It will be deactivated on
                            {{ subscription.next_payment|date }}.</p>
                        {% endif %}
                      {% endif %}
@ -132,17 +132,17 @@
                {% if subscription and subscription.status == 'cancelled' %}
                  <div class="col">
                    <p class="h4 mb-0">Subscription Cancelled</p>
-                    <p class="text-muted x-small">This subscription has been cancelled. :(</p>
+                    <p class="text-muted x-sm">This subscription has been cancelled. :(</p>
                  </div>
                {% elif subscription and subscription.status == 'expired' %}
                  <div class="col">
                    <p class="h4 mb-0">Subscription Cancelled</p>
-                    <p class="text-muted x-small">This subscription has expired.</p>
+                    <p class="text-muted x-sm">This subscription has expired.</p>
                  </div>
                {% elif subscription.status == 'pending-cancellation' %}
                  <div class="col">
                    <p class="h4 text-warning mb-0">Pending Cancellation</p>
-                    <p class="text-muted x-small">You will still have the remainder of the billing period to access content.</p>
+                    <p class="text-muted x-sm">You will still have the remainder of the billing period to access content.</p>
                  </div>
                  <div class="col-auto">
                    <div class="d-flex justify-content-center">
@ -152,7 +152,7 @@
                {% else %}
                  <div class="col">
                    <p class="h4 mb-0">Cancel Subscription</p>
-                    <p class="text-muted x-small">You will still have the remainder of the billing period to access content.</p>
+                    <p class="text-muted x-sm">You will still have the remainder of the billing period to access content.</p>
                  </div>
                  <div class="col-auto">
                    <div class="d-flex justify-content-center">
--- a/subscriptions/templates/subscriptions/teams_landing.html
+++ b/subscriptions/templates/subscriptions/teams_landing.html
@ -28,7 +28,7 @@
        </div>
      </div>
    </div>
-    <div class="hero-background" style="background-image: url('{% static 'common/images/welcome/join-background.jpg' %}'); background-position-y: 50%">
+    <div class="hero-bg" style="background-image: url('{% static 'common/images/welcome/join-bg.jpg' %}'); background-position-y: 50%">
    </div>
    <div class="hero-overlay"></div>
    <div class="hero-overlay-gradient"></div>
@ -36,13 +36,13 @@
  <div class="container">
    <div class="mb-md-5 row">
      <div class="col-md-12">
-        <div class="cards-2 cards-list">
+        <div class="cards-2 cards">
          {% for p in team_plans %}
-            <div class="cards-list-item-outer">
-              <div class="cards-list-item-inner pb-3">
-                <h2 class="cards-list-item-title lh-base pt-3">{{ p.plan.product }}<br>
+            <div class="cards-item">
+              <div class="cards-item-content pb-3">
+                <h2 class="cards-item-title lh-base pt-3">{{ p.plan.product }}<br>
                <span class="fw-normal">&nbsp;&mdash;&nbsp;{{ p.plan.name }}</span></h2>
-                <div class="cards-list-item-excerpt mb-3">
+                <div class="cards-item-excerpt mb-3">
                  <strong>{{ p.default_variation.price_per_month }}</strong> / month
                </div>
                {% if p.plan.team_properties.description %}
--- a/training/static/training/scripts/training_search.js
+++ b/training/static/training/scripts/training_search.js
@ -96,13 +96,13 @@ const renderHits = (renderOptions, isFirstRender) => {
        .map(
          (item) =>
            `
-<div class="card-training cards-list-item-outer">
-  <a href="${item.url}" class="cards-list-item-inner" data-training-id="${item.id}" data-favorite-url="${item.favorite_url}" ${favoritedTrainingIDs.filter((i) => i === item.id).length > 0 ? 'data-checked="checked"' : ''}>
-      <div class="cards-list-item-thumbnail">
+<div class="card-training cards-item">
+  <a href="${item.url}" class="cards-item-content" data-training-id="${item.id}" data-favorite-url="${item.favorite_url}" ${favoritedTrainingIDs.filter((i) => i === item.id).length > 0 ? 'data-checked="checked"' : ''}>
+      <div class="cards-item-thumbnail">
        <img src="${item.thumbnail_url}" loading="lazy">
      </div>
-      <h3 class="cards-list-item-title">${instantsearch.highlight({ attribute: 'name', hit: item })}</h3>
-      <div class="cards-list-item-extra">
+      <h3 class="cards-item-title">${instantsearch.highlight({ attribute: 'name', hit: item })}</h3>
+      <div class="cards-item-extra">
        <ul>
          <li><i class="i-graduation-cap"></i>&nbsp;${titleCase(item.type)}</li>
          <li>${item.difficulty ? `<i class="i-sliders"></i>&nbsp;${titleCase(item.difficulty)}` : ''}</li>
--- a/training/templates/training/chapter.html
+++ b/training/templates/training/chapter.html
@ -69,7 +69,7 @@
      {% endif %}

      {# TODO: @web-assets fix card layout cards width #}
-      <div class="cards-list card-layout-card-transparent files grid row">
+      <div class="cards card-layout-card-transparent files grid row">
        <div class="col-12 col-lg-4 col-md-6 col-sm-6 grid-sizer"></div>
        {% for section in chapter.sections.all %}
          {% if section.is_published  %}
--- a/training/templates/training/components/card_training.html
+++ b/training/templates/training/components/card_training.html
@ -1,17 +1,17 @@
-<div class="cards-list-item-outer card-grid-item {{ card_sizes|default:"col-12 col-lg-4 col-sm-6" }}" {% if training.favorited %}data-checked="checked"
+<div class="cards-item card-grid-item {{ card_sizes|default:"col-12 col-lg-4 col-sm-6" }}" {% if training.favorited %}data-checked="checked"
 {% endif %} data-favorite-url="{{ training.favorite_url }}" data-training-id="{{ training.id }}">
  <div class="position-relative">
-    <a class="cards-list-item-inner" href="{{ training.url }}">
-      <div class="cards-list-item-thumbnail">
+    <a class="cards-item-content" href="{{ training.url }}">
+      <div class="cards-item-thumbnail">
        <img alt="{{ training.name }}" src="{% firstof training.static_asset.thumbnail_s_url training.thumbnail_s_url %}">
      </div>
-      <h3 class="cards-list-item-title">{{ training.name }}</h3>
-      <div class="cards-list-item-excerpt">
+      <h3 class="cards-item-title">{{ training.name }}</h3>
+      <div class="cards-item-excerpt">
        <p>
          {{ training.description }}
        </p>
      </div>
-      <div class="cards-list-item-extra">
+      <div class="cards-item-extra">
        <ul>
          <li>
            <i class="i-graduation-cap"></i>
--- a/training/templates/training/components/card_training_section.html
+++ b/training/templates/training/components/card_training_section.html
@ -1,14 +1,14 @@
 {% load static %}

-<div class="card-grid-item cards-list-item-outer {{ card_sizes|default:"col-12 col-sm-6 col-lg-4" }}">
-  <a class="cards-list-item-inner" href="{{ section.url }}">
-    <div class="cards-list-item-thumbnail">
+<div class="card-grid-item cards-item {{ card_sizes|default:"col-12 col-sm-6 col-lg-4" }}">
+  <a class="cards-item-content" href="{{ section.url }}">
+    <div class="cards-item-thumbnail">
      <img alt="" src="{{ section.thumbnail_s_url }}">

      {% include 'training/components/progress_bar.html' with fraction=section.progress_fraction title=second.name %}
    </div>
-    <h4 class="cards-list-item-title fs-6">{{ section.name }}</h4>
-    <div class="cards-list-item-extra">
+    <h4 class="cards-item-title fs-6">{{ section.name }}</h4>
+    <div class="cards-item-extra">
      {{ section.training_name }}
    </div>
  </a>
--- a/training/templates/training/components/jumbotron.html
+++ b/training/templates/training/components/jumbotron.html
@ -8,7 +8,7 @@
      </div>
    </div>
  </div>
-  <div class="hero-background" style="background-image: url({% static "training/images/placeholders/jumbotron.jpg" %}); background-position-y: 50%">
+  <div class="hero-bg" style="background-image: url({% static "training/images/placeholders/jumbotron.jpg" %}); background-position-y: 50%">
  </div>
  <div class="hero-overlay"></div>
  <div class="hero-overlay-gradient"></div>
--- a/training/templates/training/home_authenticated.html
+++ b/training/templates/training/home_authenticated.html
@ -39,7 +39,7 @@
        </div>
        <div class="row">
          <div class="col-md-12">
-            <div class="cards-list card-layout-card-transparent">
+            <div class="cards card-layout-card-transparent">
              {% for training in featured_trainings|slice:':3' %}
                {% include "common/components/cards/card_training.html" with training=training %}
              {% endfor %}
@ -68,7 +68,7 @@
          <div id="search_difficulty" class="col-6 col-md-3 mb-3"></div>
        </div>
        <div class="col-md-12">
-          <div class="card-layout-card-transparent cards-list" id="hits"></div>
+          <div class="card-layout-card-transparent cards" id="hits"></div>
        </div>
      </section>
    </div>
--- a/training/templates/training/home_not_authenticated.html
+++ b/training/templates/training/home_not_authenticated.html
@ -28,7 +28,7 @@
      </div>
      <div class="row">
        <div class="col-md-12">
-          <div class="cards-list card-layout-card-transparent">
+          <div class="cards card-layout-card-transparent">
            {% for training in featured_trainings|slice:':3' %}
              {% include "common/components/cards/card_training.html" with training=training %}
            {% endfor %}
@ -55,7 +55,7 @@
        <div id="search_difficulty" class="col-6 col-md-3 mb-3"></div>
      </div>
      <div class="col-md-12">
-        <div class="card-layout-card-transparent cards-list" id="hits"></div>
+        <div class="card-layout-card-transparent cards" id="hits"></div>
      </div>
    </section>
  </div>
--- a/training/templates/training/section.html
+++ b/training/templates/training/section.html
@ -62,7 +62,7 @@
            <p class="small text-muted">{{ chapter.name }}</p>
            <h2>{{ section.name }}</h2>
          </div>
-          <div class="text-muted x-small">
+          <div class="text-muted x-sm">
            <p class="d-inline me-2">{{ section.date_created|date:"N jS, Y" }}</p>
            {% if section.static_asset.license %}
              <a href="{{ section.static_asset.license.url }}" target="_blank" class="d-inline me-2 text-muted" data-bs-toggle="tooltip" data-placement="bottom" title="{{ section.static_asset.license.description }}">
--- a/users/templates/users/settings/production_credits.html
+++ b/users/templates/users/settings/production_credits.html
@ -8,14 +8,14 @@
  {% else %}
    <div class="row">
      <div class="col-md-12">
-        <div class="card-layout-card-transparent cards-list">
+        <div class="card-layout-card-transparent cards">
          {% for credit in credits %}
-            <div class="cards-list-item-outer">
-              <a class="cards-list-item-inner">
-                <div class="cards-list-item-thumbnail">
+            <div class="cards-item">
+              <a class="cards-item-content">
+                <div class="cards-item-thumbnail">
                  {% include "common/components/helpers/image_resize.html" with alt=credit.film.title classes="img-fluid" img_source=credit.film.thumbnail width="500" %}
                </div>
-                <h3 class="cards-list-item-title">{{ credit.film.title }}</h3>
+                <h3 class="cards-item-title">{{ credit.film.title }}</h3>
              </a>
            </div>
          {% endfor %}
--- a/users/templates/users/settings/tabs.html
+++ b/users/templates/users/settings/tabs.html
@ -23,7 +23,7 @@

 <div class="drawer-nav-dropdown-wrapper">
  <a class="drawer-nav-dropdown drawer-nav-dropdown-text" href="{% url 'user-settings-billing' %}">
-    <i class="i-credit-card me-3 pt-1 x-small"></i>
+    <i class="i-credit-card me-3 pt-1 x-sm"></i>
    <span>Subscription</span>
  </a>
  <a class="drawer-nav-dropdown icon" data-bs-toggle="collapse" data-bs-target="#subscription-collapse">