stop14-themesystem-legacy 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "stop14-themesystem-legacy",
- "version": "2.1.0",
+ "version": "2.1.2",
  "description": "A scaffolding and build system for theme development across platforms. Legacy version",
  "author": {
   "name": "Bill Kennedy",
@@ -55,6 +55,7 @@
   "jshint": "^2.13.0",
   "jshint-stylish": "^2.2.1",
   "lazypipe": "^1.0.1",
+  "masonry-layout": "^4.2.2",
   "object-path": "^0.11.5",
   "postcss": "^8.4.38",
   "prettier": "^2.8.8",

package/scaffolding/drupal/_00_main_configuration.yml

@@ -147,6 +147,7 @@ ui_minheight: $ui_element_height
 ui_maxheight: 60px
 ui_compactheight: 40px
 ui_largeheight: 80px
+ui_input_minwidth: 300px
 ui_max_text_width: 500px
 ui_element_spacing: "rv($mobile_edge_padding_factor)"
 ui_border_radius: 8px
@@ -226,8 +227,9 @@ ui_select_max_width: 100%
 
 #Callouts
 
-callout_shift: 0
+callout_shift: 90px
 callout_width: 40%
+callout_text_size: clamped(2,3)
 callout_inset: null
 callout_breakpoint: lrg
 
@@ -297,7 +299,7 @@ slide_item_portrait_object_fit: contain
 slide_item_portrait_position: center
 slide_item_portrait_slide_padding: 0
 
-slide_item_landscape_object_fit: contain
+slide_item_landscape_object_fit: cover
 slide_item_landscape_position: center
 slide_item_landscape_slide_padding: 0
 

package/scaffolding/drupal/package.json

@@ -1,25 +1,18 @@
 {
-  "name": "agile-generic-theme",
-  "version": "1.0.0",
-  "description": "Base Omeka theme and front-end development system.",
+  "name": "stop14-theme-scaffolding",
+  "version": "1.1.0",
+  "description": "Base Drupal theme and front-end development system.",
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "https://agile.git.beanstalkapp.com/ctc-19.git"
+    "url": "https://agile.git.beanstalkapp.com/agile-d9-theme-scaffold.git"
   },
-  "author": "Agile Humanities Agency",
+  "author": "Stop14 Media",
   "license": "MIT",
   "dependencies": {
-    "fs": "^0.0.1-security",
-    "gulp-if": "^3.0.0",
-    "masonry-layout": "^4.2.2",
-    "path": "^0.12.7",
-    "pdfjs-dist": "^4.10",
-    "stop14-themesystem-legacy": "^2.0",
-    "superfish": "^1.7.10",
-    "yargs": "^16.2.0"
+    "stop14-themesystem-legacy": "^2.1.0"
   }
 }

package/scaffolding/drupal/source/sass/10_colours_and_patterns/_effects.sass

@@ -12,7 +12,7 @@ $glow_radius: 25px
 
 %feature-glow
   position: relative
-  
+
   &:before
     position: absolute
     content: ''
@@ -25,48 +25,48 @@ $glow_radius: 25px
     transform: scale(1.03) rotate(-2deg)
     filter: blur(4px)
     border-radius: $ui_border_radius
-    
+
   &:hover
     &:before
       background-color: set-colour-tint(2,90)
-      
+
 %rotation-glow
-      position: relative
-      
-      &:before
-        position: absolute
-        content: ''
-        z-index: -2
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        background-color: set-colour-tint(2,40)
-        transform: scale(1.03) rotate(-4deg)
-        filter: blur(5px)
-        border-radius: 0
-        mix-blend-mode: multiply
-        opacity: 0.7
-        
-      &:after
-        position: absolute
-        content: ''
-        z-index: -1
-        top: 0
-        left: 0
-        right: 0
-        bottom: 0
-        background-color: set-colour-tint(2,40)
-        transform: scale(1.03) rotate(4deg)
-        filter: blur(3px)
-        border-radius: 0
-        mix-blend-mode: multiply
-        opacity: 0.6
-
-        
-      &:hover
-        &:before, &:after
-          background-color: set-colour-tint(2,70)
+  position: relative
+
+  &:before
+    position: absolute
+    content: ''
+    z-index: -2
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: set-colour-tint(2,40)
+    transform: scale(1.03) rotate(-4deg)
+    filter: blur(5px)
+    border-radius: 0
+    mix-blend-mode: multiply
+    opacity: 0.7
+
+  &:after
+    position: absolute
+    content: ''
+    z-index: -1
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: set-colour-tint(2,40)
+    transform: scale(1.03) rotate(4deg)
+    filter: blur(3px)
+    border-radius: 0
+    mix-blend-mode: multiply
+    opacity: 0.6
+
+
+  &:hover
+    &:before, &:after
+      background-color: set-colour-tint(2,70)
 
 %glow-hover
   position: relative
@@ -98,7 +98,7 @@ $glow_radius: 25px
     width: rv(4)
     +bp($tablet)
       width: rv(6)
-    
+
 
 %trailing-rule-right
   &:before
@@ -109,6 +109,19 @@ $glow_radius: 25px
     left: 100%
     margin-left: rv(-2)
     width: rv(4)
+
+    +bp($tablet)
+      width: rv(6)
+
+%rule-top
+  &:before
+    position: relative
+    content: ''
+    border-bottom: 4px solid $black
+    margin: rv($mobile_edge_padding_factor) auto
+    width: rv(4)
+    display: block
+
     +bp($tablet)
       width: rv(6)
 

package/scaffolding/drupal/source/sass/40_ui/_buttons.sass

@@ -7,7 +7,7 @@
  **/
 
 
-.button
+.button, .btn
   @extend %button
 
   &.compact

package/scaffolding/drupal/source/sass/40_ui/_component_drupal_search_block_form.sass

@@ -0,0 +1,16 @@
+#search-block-form, #search-block-form--2
+  display: flex
+  flex-direction: column
+
+  +bp($tablet)
+    flex-direction: row
+
+  > *
+    margin-bottom: $ui_element_spacing
+
+    +bp($tablet)
+      margin-right: $ui_element_spacing
+
+    &:last-child
+      +bp($tablet)
+        margin-right: 0

package/scaffolding/drupal/source/sass/40_ui/_component_drupal_user_login_form.sass

@@ -0,0 +1,21 @@
+#user-login-form
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+
+  +bp($desktop)
+    flex-direction: row
+    align-items: flex-end
+
+  > *
+    display: flex
+    flex-direction: column
+
+    margin-bottom: $ui_element_spacing
+
+    +bp($desktop)
+      margin-right: $ui_element_spacing
+
+    &:last-child
+      +bp($desktop)
+        margin-right: 0

package/scaffolding/drupal/source/sass/40_ui/_form_elements.sass

@@ -28,9 +28,9 @@
   * overlay-colour|Overlay: yellow background
   *
   */
-// “trigger” class used by Drupal for its contextual menus. “MuiButtonBase used for Mirador.
-button:not(.trigger,.MuiButtonBase-root)
-  @extend %button
+// “trigger” class used by Drupal for its contextual menus. “MuiButtonBase used for Mirador. This now handled in core
+// button:not(.trigger,.MuiButtonBase-root)
+//   @extend %button
 
 input:focus
   outline: none !important
@@ -38,11 +38,10 @@ input:focus
 
 input[type='text'],
 input[type='email'],
+input[type="search"],
 textarea#edit-message
   @extend %input-text
-
-input[type="search"] // Button
-  @extend %button-search
+  min-width: $ui_input_minwidth
 
 input[type="submit"] //Button
   @extend %button-submit

package/scaffolding/drupal/source/sass/40_ui/_index.sass

@@ -8,7 +8,9 @@
 @import _browser_ui_definitions
 @import _component_capsule
 @import _component_drupal_advanced_search_form
+@import _component_drupal_user_login_form
 @import _component_drupal_one_line_form
+@import _component_drupal_search_block_form
 @import _component_form_select2
 @import _component_superfish_navigation
 @import _component_views

package/scaffolding/drupal/source/sass/40_ui/_search_form.sass

@@ -12,7 +12,7 @@
   align-items: center
 
   > *
-    margin: 0 rv($mobile_edge_padding_factor) 0 0
+    margin: 0 $ui_element_spacing 0 0
 
     &:last-child
       margin-right: 0

package/scaffolding/drupal/source/sass/40_ui/_ui_definitions.sass

@@ -51,7 +51,7 @@
 
 %button
   @extend %button-base
-  text-decoration: underline
+  text-decoration: none
   display: inline-flex
   flex-direction: row
   align-items: center
@@ -209,23 +209,26 @@
     &:hover
       border-bottom: 2px solid $black
 
+// !important flag needed because of specificity issues in Drupal implementations
+// @todo: look at the :not declarations in the core ui components to manage specificity better.
+
+
 %button-submit
   @extend %button
-  +submit-arrow
-  border-width: $btn_submit_border_width
-  border-color: $btn_submit_border_color
+  +input-button-icon('arrow',$btn_icon_size,$ui_padding,'reversed','reversed','right')
+  border-width: $btn_submit_border_width !important
+  border-color: $btn_submit_border_color !important
   font-style: normal
-  background-color: $btn_submit_bg_color
-  color: $btn_submit_color
+  background-color: $btn_submit_bg_color !important
+  color: $btn_submit_color !important
   min-width: $btn_compactwidth
   text-decoration: none
   justify-content: flex-start
 
   &:hover
-    +submit-arrow-hover
-    color: $btn_submit_hover_color
-    background-color: $btn_submit_hover_bg_color
-    border-color: $btn_submit_hover_border_color
+    color: $btn_submit_hover_color  !important
+    background-color: $btn_submit_hover_bg_color  !important
+    border-color: $btn_submit_hover_border_color  !important
 
 %button-search
   @extend %button-ghost

package/scaffolding/drupal/source/sass/60_site_elements/00_definitions/_index.sass

@@ -4,4 +4,3 @@
    @description  Loads SASS files for local theme. */
 
 @import _media_element_definitions
-@import _callout_definitions

package/scaffolding/drupal/source/sass/60_site_elements/content/_slide.sass

@@ -21,7 +21,7 @@
     &:hover
       border: 0
 
-    .node--content
+    .node--content, .node__content
       height: inherit
       +gradient-overlay-slide
 

package/scaffolding/drupal/source/sass/60_site_elements/paragraphs/agile_theme_tools/_callout.sass

@@ -1,32 +1,85 @@
-/**
+/*
  *  @file _callout.sass
- *  @category 60_site_elements
- *  @theme LOCAL
- *  @description Styles for the paragraph callout block.
+ *  @description defines the callout paragraph in the Content Builder suite
  *
- **/
+ *  $callout_shift is defined in the Main configuration
+ */
 
-.paragraph--type--callout
-  padding: rv($mobile_block_spacing) * 2 0
-  +bp($tablet)
-    padding: rv($block_spacing) * 2 0
+// Consider moving these into main config
 
-  .field_body_container
-    .field_body
-      p
-        color: black
+$callout_border_width: 10px
+$callout_border_colour: set-colour(2)
 
-  .field_callout_container
-    .field_callout
-      p
-        @extend %callout-center
+.callout, .paragraph--type--callout
+  min-height: 100px
+
+  .callout-text, .field_callout_container
+    position: relative
+    width: 100%
+    padding: 0 rv($mobile_edge_padding_factor) rv($mobile_edge_padding_factor) rv($mobile_edge_padding_factor)
+    display: flex
+    flex-direction: column
+    align-items: center
+
+    +bp($tablet)
+      display: block
+      max-width: 370px
+      padding: 0 rv($edge_padding_factor) rv($edge_padding_factor) rv($edge_padding_factor)
+      width: $callout_width
+      max-width: 370px
+
+    +bp($desktop)
+      max-width: 500px
+
+    // Sets the sizing of the callout
+
+    .field-value
+      font-size: $callout_text_size
+      font-weight: $bold
 
-.callout-left
-  .field_callout
     p
-      @extend %callout-left
+      font-size: inherit
+      font-weight: inherit
+      margin-top: rv($mobile_edge_padding_factor)
+      margin-bottom: 0
+
+      +bp($tablet)
+        margin-top: 0
 
 .callout-right
-  .field_callout
-    p
-      @extend %callout-right
+  .callout-text, .field_callout_container
+    +bp($tablet)
+      float: right
+    +bp($desktop)
+      transform: translateX($callout_shift)
+      margin-left: $callout_shift * -1
+
+    .field_callout
+      border-bottom: $callout_border_width solid $callout_border_colour
+      padding-bottom: rv($mobile_edge_padding_factor)
+
+      +bp($tablet)
+        border-bottom: none
+        padding-bottom: 0
+        border-left: $callout_border_width solid $callout_border_colour
+        padding-left: rv($edge_padding_factor)
+
+.callout-left
+  .callout-text, .field_callout_container
+    +bp($tablet)
+      text-align: right
+      float: left
+    +bp($desktop)
+      transform: translateX($callout_shift * -1)
+      margin-right: $callout_shift * -1
+
+    .field_callout
+      border-bottom: $callout_border_width solid set-colour(2)
+      padding-bottom: rv($mobile_edge_padding_factor)
+
+      +bp($tablet)
+        border-bottom: none
+        padding-bottom: 0
+        border-right: $callout_border_width solid set-colour(2)
+        padding-right: rv($edge_padding_factor)
+

package/scaffolding/drupal/source/sass/60_site_elements/paragraphs/agile_theme_tools/_quotation.sass

@@ -5,29 +5,28 @@
  *  @description Styles for the paragraph quotation block.
  *
  **/
-  
-  
-  
+
+
+
 .paragraph--type--quotation.paragraph--view-mode--default
   padding: rv($mobile_block_spacing) * 3 0
   +bp($tablet)
     padding: rv($block_spacing) * 3 0
-  
+
   .field_quotation
     font-family: $basefont
-    font-weight: $light
+    font-weight: $normal
     text-align: center
-    font-size: clamped(2, 5, 'sml', 'xlrg')    
+    font-size: clamped(2, 5, 'sml', 'xlrg')
     line-height: 1.25
 
   .field_attribution_container
     text-align: center
-    padding-top: rv(0)
+    padding-top: rv($edge_padding_factor)
+
     .field_attribution
-      font-size: clamped(0, 1, 'sml', 'xlrg')   
+      font-size: clamped(0, 1, 'sml', 'xlrg')
       text-transform: uppercase
-      display: inline
-      padding-left: rv(-2)
       position: relative
-      @extend %trailing-rule-left
+      @extend %rule-top
 

package/scaffolding/drupal/templates/content/node--slide.html.twig

@@ -0,0 +1,99 @@
+{#
+/**
+ * @file
+ * Theme override to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: Themed creation date field.
+ * - author_name: Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ */
+#}
+{%
+    set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    'slide',
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    view_mode
+]
+%}
+{{ attach_library('classy/node') }}
+<article{{ attributes.addClass(classes) }}>
+    <a href="{{ url }}">
+        {{ title_prefix }}
+        <div{{ content_attributes.addClass('node__content') }}>
+            {{ content|without('body','field_thumbnail') }}
+        </div>
+        <footer class="reversed">
+            {{ title_suffix }}
+            <h3{{ title_attributes }}>{{ label }}</h3>
+            {{ content.body }}
+            <p class='read-more'>Read more</p>
+        </footer>
+    </a>
+</article>

package/source/sass/a_components/10_colours_and_patterns/00_core/11_functions/_hsb.sass

@@ -1,10 +1,21 @@
 /* @file
- * Converts HSB colours (e.g. as defined in Adobe CC or Sketch) into SASS-supported HSL colours. */
+ * Converts HSB colours (e.g. as defined in Adobe CC or Sketch)
+ * into SASS-supported HSL colours.
+ */
 
 @function hsb($h-hsb, $s-hsb, $b-hsb, $a: 1)
   @if $b-hsb == 0
     @return hsla(0, 0, 0, $a)
+
+
+  $l-hsl: ($b-hsb / 2) * (2 - ($s-hsb / 100))
+
+  @if $l-hsl < 50
+    $denominator: $l-hsl * 2
   @else
-    $l-hsl: ($b-hsb/2) * (2 - ($s-hsb/100))
-    $s-hsl: ($b-hsb * $s-hsb) / if($l-hsl < 50, $l-hsl * 2, 200 - $l-hsl * 2)
-    @return hsla($h-hsb, $s-hsl, $l-hsl, $a)
+    $denominator: 200 - ($l-hsl * 2)
+
+
+    $s-hsl: ($b-hsb * $s-hsb) / $denominator
+
+    @return hsla($h-hsb, $s-hsl, $l-hsl, $a)

package/source/sass/a_components/40_ui/ui_element_base_v002/13_definitions/_form_elements.sass

@@ -262,6 +262,7 @@
 
   +reversed
     background-color: $white
+    color: neutral(80)
 
   &:hover
     border-color: $ui_hover_border_color

package/source/sass/a_components/40_ui/ui_element_base_v002/_form_ui.sass

@@ -29,9 +29,14 @@
   *
   */
 // “trigger” class used by Drupal for its contextual menus. “MuiButtonBase used for Mirador.
-button:not(.trigger,.MuiButtonBase-root,.icon)
+//.trigger,.MuiButtonBase-root,.icon
+
+button
   @extend %button
 
+  &.icon, &.trigger, &.MuiButtonBase-root
+    all: unset
+
 input:focus
   outline: none !important
   border-color: $clr2

package/source/sass/a_components/40_ui/ui_element_base_v002/_general_ui.sass

@@ -7,7 +7,11 @@
 // Note: applying styles to <button> elements often create problems with third-party modules and admin interfaces.
 // It is advised that you add a button class to button elements to avoid conflicts
 
-.button:not(.trigger,.MuiButtonBase-root,.icon)
+//.button:not(.trigger,.MuiButtonBase-root,.icon) was originally called, but its specificity is too high
+// and it’s only applicable to specific platforms and situations where the standard button styling was interfering
+// with specifically styled applications. @todo: figure out another approach.
+
+.button, .btn
   @extend %button
 
   &.compact

package/source/sass/a_components/40_ui/ui_element_base_v002/_standardized_icons/_icon_mixins.sass

@@ -36,7 +36,7 @@
     height: $size
     width: $size
     margin-right: $ui_padding
-    +background-icon-base($icon_name,'contain',$initial_state,$active_state)
+    +background-icon-base($icon_name,$btn_icon_size,$initial_state,$active_state)
     background-position: center left
 
   &.active, &:hover
@@ -56,7 +56,7 @@
     height: $size
     width: $size
     margin-left: $ui_padding
-    +background-icon-base($icon_name,'contain',$initial_state,$active_state)
+    +background-icon-base($icon_name,$btn_icon_size,$initial_state,$active_state)
     background-position: center right
 
   &.active, &:hover
@@ -74,14 +74,13 @@
 
 
 
-=icon($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
+=icon($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active',$position: center)
   height: $size
   width: $size
-  +background-icon-base($icon_name,$size,$initial_state,$active_state)
-  background-position: center
+  +background-icon-base($icon_name,$size,$initial_state,$active_state,$position)
 
   &.active, &:hover
-    +background-icon-base($icon_name,$size,$initial_state,$active_state)
+    +background-icon-base($icon_name,$size,$initial_state,$active_state,$position)
 
 =icon-with-label($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active', $position: 'left')
   @extend %icon-label

package/source/sass/a_components/60_site_elements/drupal_general_support/_component_drupal_contextual_menu.sass

@@ -10,6 +10,11 @@
   bottom: initial !important
   left: initial !important
 
+  // Handles certain contextual menu buttons, following base definitions overridden by UI core
+
+  button.trigger
+    clip: rect(1px, 1px, 1px, 1px)
+    min-width: initial
 
 // Handles reversed situations
 
@@ -23,3 +28,4 @@
     a
       color: $white
       background-color: $black
+

package/source/sass/a_components/60_site_elements/drupal_general_support/_mirador_compatibility.sass

@@ -8,3 +8,6 @@
 
 .toolbar-oriented .toolbar-bar
   z-index: 1102
+
+button.MuiButtonBase-root
+  min-width: initial // Let’s Mirador control button widths

package/scaffolding/drupal/source/sass/60_site_elements/00_definitions/_callout_definitions.sass

@@ -1,27 +0,0 @@
-// Callout definitions
-
-%callout-left
-  +bp($tablet)
-    max-width: rv(8)
-    text-align: right
-    float: left
-    margin: 0 rv(1) rv(1) 0
-    line-height: rv(1)
-  +bp($desktop)
-    max-width: rv(10)
-    line-height: rv(2)
-
-%callout-right
-  +bp($tablet)
-    max-width: rv(9)
-    float: right
-    margin: 0 0 rv(1) rv(1)
-    line-height: rv(1)
-  +bp($desktop)
-    max-width: rv(10)
-    line-height: rv(2)
-
-%callout-center
-  color: black !important
-  font-size: clamped(1, 4, 'sml', 'xlrg')!important
-  text-align: center