/** --------------------------------------------------
*
*   components / content blocks /
*   PAGE INTRO SDC
*   Hero-like component with
*     - page title,
*     - subtitle, text, links (optional)
*     - visual (optional)
*
*   INFO
*   See /scss subfolder for partials relating to styles
*   unique to specific layout variants.
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component media-right view mode
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   clamped
*
*   Clamps an output value between a min & max value
*   and interpolates the "preferred" value based on the
*   slope between the breakpoints at which the min/max
*   value should be used as the cut-off.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rem
*
*   Converts a pixel value to rems.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rem
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   rnd
*
*   Built-in Sass math:round (and ceil/floor) functions
*   result in whole numbers only.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #rnd
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #clamped
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   iff
*
*   Syntactic sugar around Sass' built-in `if` function that
*   does not require you to pass a value for `$if-false`.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #iff
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   implode
*
*   Variant of PHP array implode to convert list items into a string
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #implode
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   internal media query helpers to help convert & interpret MQ's
*
*   TABLE OF CONTENTS
*   mq
*   interpret-features
*   breakpoint-lookup
*   media-concatenate
*   convert units
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   strip-unit
*
*   Strips the unit of input and returns just the numerical value.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #strip-unit
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #mq [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #interpret-features [internal function]
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #breakpoint-lookup
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #media-concatenate
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #convert units
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   space
*
*   Returns the min or max value for a given key on
*   the size scale. Defaults to min (mobile first).
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / FUNCTIONS
*   token
*
*   Checks the design token maps for a given entry
*   and returns the result.
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   COLOR DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/colors or components instead.
*
*   TABLE OF CONTENTS
*   color tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   SIZE SCALE DESIGN TOKENS
*   These represent the mobile & desktop device size scale
*   from the Figma file as a min/max value per scale entry.
*   We cannot simply override the properties at a certain
*   breakpoint as this clashes with the component (container)
*   implementation.
*   By adding these tokens, we can at least maintain the naming
*   and values from the Figma file for easier reference without
*   having to resort to manually entering unrelated spacing units
*   all throughout the project.
*
*   TABLE OF CONTENTS
*   size scale tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   TYPOGRAPHY DESIGN TOKENS
*   These should never be used directly for styling.
*   Use abstractions in /variables/font-styles instead.
*
*   TABLE OF CONTENTS
*   typographic tokens
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #token
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #space
*  -------------------------------------------------- */
/** --------------------------------------------------
*
*   components / content blocks /
*   PAGE INTRO SDC
*   Hero-like component with
*     - page title,
*     - subtitle, text, links (optional)
*     - visual (optional)
*
*   INFO
*   See /scss subfolder for partials relating to styles
*   unique to specific layout variants.
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component media-right view mode
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   VARIABLES
*   breakpoints
*
*   INFO
*   breakpoint configuration:
*   - $mq-breakpoints is a list of breakpoints which
*     can be entered in px (recommended), em or rem.
*     Output will always be in em units.
*     Order of the breakpoints in the list does not matter.
*   - $mq-presets is an (optional) list of frequent combos
*
*   SDC
*   Try to minimise the use of breakpoints inside SDC component
*   styles. Container Queries are preferred so the components
*   can adjust themselves without needing awareness of their context.
*   (For instance: on a page with sidebar vs full width)
*
*   TABLE OF CONTENTS
*   custom breakpoints
*   frequently used presets
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #custom breakpoints
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #frequently used presets
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   components / content blocks /
*   PAGE INTRO SDC
*   Hero-like component with
*     - page title,
*     - subtitle, text, links (optional)
*     - visual (optional)
*
*   INFO
*   See /scss subfolder for partials relating to styles
*   unique to specific layout variants.
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component media-right view mode
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   queries
*
*   INFO
*   Media query mixins to be called directly or with
*   predefined keys configured in [variables/breakpoints]
*   +
*   basic container query mixin (inline-size, width > x)
*   sharing the same breakpoints and conversion logic as our
*   media query mixin
*
*   TABLE OF CONTENTS
*   fallback defaults
*   mq
*   mqset
*   cq
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #fallback defaults
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mq
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #mqset
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #cq
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   create button variants
*
*   INFO
*   Mixin to generate all button variant & style combos.
*
*   TABLE OF CONTENTS
*   create-button-variants
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #create-button-variants
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   tokens to custom property
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   tokens-to-custom-property
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #tokens-to-custom-property
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   components / content blocks /
*   PAGE INTRO SDC
*   Hero-like component with
*     - page title,
*     - subtitle, text, links (optional)
*     - visual (optional)
*
*   INFO
*   See /scss subfolder for partials relating to styles
*   unique to specific layout variants.
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component media-right view mode
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   typography
*
*   INFO
*   Mixin to include all typographic related rules
*   based on a given token. Includes fluid type scale.
*
*   TABLE OF CONTENTS
*   font-styles
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*   #font
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   components / content blocks /
*   PAGE INTRO SDC
*   Hero-like component with
*     - page title,
*     - subtitle, text, links (optional)
*     - visual (optional)
*
*   INFO
*   See /scss subfolder for partials relating to styles
*   unique to specific layout variants.
*
*   TABLE OF CONTENTS
*   component properties
*   component spacing
*   component media-right view mode
*
*   -------------------------------------------------- */
/** --------------------------------------------------
*
*   BASE / UTILS
*   visually hidden
*
*   TABLE OF CONTENTS
*   visually hidden
*   visually hidden - focusable
*
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden
*  -------------------------------------------------- */
/** --------------------------------------------------
*  #visually hidden - focusable
*  -------------------------------------------------- */
/** --------------------------------------------------
*   #component properties
*   -------------------------------------------------- */
.sdc--type-hero {
  --hero-padding-block: 1.5rem;
  --hero-subtitle-space: 0.25rem;
  --hero-intro-space: 0.375rem;
  --hero-actions-space: 1.25rem;
  --hero-bottom-space: 1.25rem;
}

/* Init all the conversion and processing of input and config values */
/* Use the media query strings from map above to output the CSS rules */
@media all and (min-width: 48em) {
  .sdc--type-hero {
    --hero-padding-block: 5rem;
    --hero-subtitle-space: 1rem;
    --hero-intro-space: 1.5rem;
    --hero-actions-space: 2.5rem;
    --hero-bottom-space: 3rem;
  }
}
/** --------------------------------------------------
*   #component spacing & positioning
*   -------------------------------------------------- */
.sdc--type-hero {
  overflow-x: clip;
}
.sdc--type-hero .hero-cq {
  display: grid;
  grid-template-columns: repeat(var(--page-columns-count), 1fr);
  gap: 0 1.5rem;
}
.sdc--type-hero .content-media {
  position: relative;
  z-index: 0;
}
.sdc--type-hero .content-media .field--name-field-media-oembed-video {
  height: 100%;
}
.sdc--type-hero .content-media .field--name-field-media-oembed-video iframe {
  width: 100%;
  height: 100%;
}
.sdc--type-hero .content {
  padding-block: var(--hero-padding-block);
  grid-column: span 4;
  position: relative;
  z-index: 3;
  pointer-events: none;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero .content {
    grid-column: span 6;
  }
}
.sdc--type-hero .subtitle:is(* + *) {
  margin-block-start: var(--hero-subtitle-space);
}
.sdc--type-hero .text {
  pointer-events: none;
}
.sdc--type-hero .text:is(* + *) {
  margin-block-start: var(--hero-intro-space);
}
.sdc--type-hero .sdc--type-action-bar:is(* + *) {
  margin-block-start: var(--hero-actions-space);
}
.sdc--type-hero .sdc--type-action-bar a {
  pointer-events: auto;
}
.sdc--type-hero:has(.sdc-inner--action-bar:empty) .sdc--type-action-bar {
  display: none;
}
.sdc--type-hero .sdc--type-action-bar .sdc-inner--action-bar {
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero .sdc--type-action-bar .sdc-inner--action-bar {
    justify-content: start;
  }
}

.sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) {
  position: relative;
  z-index: 1;
  padding: 2.5rem 0;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) {
    padding: 0;
  }
}
.sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) .sdc-inner--hero {
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) .sdc-inner--hero {
    grid-template-rows: var(--hero-padding-block) auto;
  }
}
.sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) .content {
  grid-column: 1/-1;
  grid-row: 1/-1;
  margin-block-start: var(--hero-bottom-space);
  padding-block: var(--image-offset);
}
.sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) .content-media {
  z-index: 2;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero:not(.sdc--type-hero--media-right):not(.sdc--type-hero--media-full) .content-media {
    order: 0;
    grid-row: 2/-1;
    grid-column: 1/span 6;
    max-width: none;
    position: relative;
    inset: auto;
  }
}

/** --------------------------------------------------
*   #component media-right view mode
*   -------------------------------------------------- */
.sdc--type-hero .sdc--type-action-bar .sdc-inner--action-bar {
  display: grid;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .sdc--type-hero .sdc--type-action-bar .sdc-inner--action-bar {
    display: flex;
  }
}

.hero--content-left-media.sdc--type-hero--media-right {
  position: relative;
  z-index: 1;
  padding: 4rem 0 2.5rem;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-right {
    padding: 0;
  }
}
.hero--content-left-media.sdc--type-hero--media-right .sdc-inner--hero {
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-right .sdc-inner--hero {
    grid-template-rows: var(--hero-padding-block) auto;
  }
}
.hero--content-left-media.sdc--type-hero--media-right .content {
  order: 2;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-right .content {
    grid-row: 1/3;
    grid-column: 1/span 6;
    align-self: center;
    order: 1;
  }
}
.hero--content-left-media.sdc--type-hero--media-right .content-media {
  grid-column: 1/-1;
  z-index: 2;
  order: 1;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
.hero--content-left-media.sdc--type-hero--media-right .content-media iframe {
  aspect-ratio: 16/9;
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-right .content-media {
    order: 2;
    grid-row: 2/-1;
    grid-column: 7/span 6;
    max-width: none;
    position: relative;
    inset: auto;
  }
}
.hero--content-left-media.sdc--type-hero--media-right .content-media__wrapper {
  position: relative;
}
.hero--content-left-media.sdc--type-hero--media-right .content-media__wrapper:has(.field--name-field-media-video-file) button {
  width: 4rem;
  aspect-ratio: 1/1;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 0;
  outline: 0.125rem solid var(--color-fills-brand-accent2-base);
  outline-offset: 0.25rem;
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 1.375rem;
}
.hero--content-left-media.sdc--type-hero--media-right .content-media__wrapper:has(.field--name-field-media-video-file) button:hover, .hero--content-left-media.sdc--type-hero--media-right .content-media__wrapper:has(.field--name-field-media-video-file) button:focus-visible {
  opacity: 1;
  outline-offset: 0;
}
.hero--content-left-media.sdc--type-hero--media-right .content-media__wrapper:hover .field--name-field-media-video-file button {
  opacity: 1;
}
.hero--content-left-media.sdc--type-hero--media-right .field--name-field-media-oembed-video,
.hero--content-left-media.sdc--type-hero--media-right .field--name-field-media-video-file {
  border-radius: var(--radius-image);
  overflow: clip;
}

.hero--content-left-media.sdc--type-hero--media-full {
  position: relative;
  z-index: 1;
  background: var(--color-fills-brand-accent2-subtles, #FDF8EB);
  padding-block-start: var(--hero-padding-block);
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full {
    background: none;
    padding-block-start: 0;
  }
}
.hero--content-left-media.sdc--type-hero--media-full .content-media img {
  aspect-ratio: 16/9;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full .content-media img {
    aspect-ratio: 1440/460;
  }
}
.hero--content-left-media.sdc--type-hero--media-full .sdc-inner--hero {
  align-items: center;
  grid-template-rows: 1fr auto;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full .sdc-inner--hero {
    grid-template-rows: 1fr;
    min-height: 28.75rem;
  }
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file), .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) {
  aspect-ratio: 3/1;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file), .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) {
    aspect-ratio: 3/1;
  }
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media__wrapper, .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content-media,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content-media__wrapper {
  height: max-content;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media__wrapper,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .field--name-field-media-oembed-video,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .field--name-field-media-oembed-video iframe,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .field--name-field-media-video-file,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .field--name-field-media-video-file video, .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content-media,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content-media__wrapper,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .field--name-field-media-oembed-video,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .field--name-field-media-oembed-video iframe,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .field--name-field-media-video-file,
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .field--name-field-media-video-file video {
  width: 100%;
  max-width: 100%;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .sdc--type-action-bar > *, .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .sdc--type-action-bar > * {
  pointer-events: default;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media .field--name-field-media-video-file {
  height: 0;
  padding-bottom: 33.33%;
  position: relative;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media .field--name-field-media-video-file button {
  width: 4rem;
  aspect-ratio: 1/1;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 0;
  outline: 0.125rem solid var(--color-fills-brand-accent2-base);
  outline-offset: 0.25rem;
  background-color: rgba(255, 255, 255, 0.8);
  background-size: 1.375rem;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media .field--name-field-media-video-file button:hover, .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media .field--name-field-media-video-file button:focus-visible {
  opacity: 1;
  outline-offset: 0;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file) .content-media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-video-file):hover .content-media .field--name-field-media-video-file button {
  opacity: 1;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content {
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content {
    text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
  }
  .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content .title,
  .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content .subtitle,
  .hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .content .text {
    pointer-events: none;
  }
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) .field--name-field-media-oembed-video {
  height: 0;
  padding-bottom: 33.33%;
  position: relative;
}
.hero--content-left-media.sdc--type-hero--media-full:has(.field--name-field-media-oembed-video) iframe {
  position: absolute;
  inset: 0;
  aspect-ratio: 21/9;
}
.hero--content-left-media.sdc--type-hero--media-full .content-media {
  width: 100%;
  max-width: calc(100dvw - 3rem);
  height: 100%;
  grid-column: span 4;
  margin: 0 auto;
  order: -1;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
.hero--content-left-media.sdc--type-hero--media-full .content-media picture {
  width: 100%;
  height: 100%;
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full .content-media {
    grid-column: auto;
    z-index: 0;
  }
  .hero--content-left-media.sdc--type-hero--media-full .content-media::after {
    content: "";
    width: 50dvw;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }
}
.hero--content-left-media.sdc--type-hero--media-full .content-media::before {
  display: none;
}
.hero--content-left-media.sdc--type-hero--media-full .content-media__wrapper {
  height: 100%;
}
.hero--content-left-media.sdc--type-hero--media-full .content-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Init all the conversion and processing of input and config values */
  /* Use the media query strings from map above to output the CSS rules */
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full .content-media img {
    position: absolute;
    inset: 0;
  }
}
@media all and (min-width: 48em) {
  .hero--content-left-media.sdc--type-hero--media-full .content-media {
    max-width: var(--site-width);
    position: absolute;
    inset: 0;
  }
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill] {
  color: var(--color-fills-brand-accent1-base);
  background-color: var(--color-fills-brand-accent3-base);
  border-color: var(--color-fills-brand-accent3-base);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]::after {
  background-color: var(--color-fills-brand-accent1-base);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:hover {
  color: var(--color-text-inverse-white);
  background-color: var(--color-fills-brand-accent1-hover);
  border-color: var(--color-fills-brand-accent1-hover);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:hover::after {
  background-color: var(--color-text-inverse-white);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:active, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:focus, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:focus-within {
  color: var(--color-text-inverse-white);
  background-color: var(--color-fills-brand-accent1-pressed);
  border-color: var(--color-fills-brand-accent1-pressed);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:active::after, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:focus::after, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:focus-within::after {
  background-color: var(--color-text-inverse-white);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:disabled {
  color: var(--color-text-neutral-base);
  background-color: var(--color-fills-neutral-disabled);
  border-color: var(--color-fills-neutral-disabled);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--primary[data-style=fill]:disabled::after {
  background-color: var(--color-text-neutral-base);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline] {
  color: var(--color-fills-brand-accent1-base);
  background-color: var(--color-fills-inverse-white);
  border-color: var(--color-fills-brand-accen3-base);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]::after {
  background-color: var(--color-fills-brand-accent1-base);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:hover {
  color: var(--color-fills-brand-accent1-hover);
  background-color: var(--color-fills-brand-accent2-subtler);
  border-color: var(--color-fills-brand-accent1-hover);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:hover::after {
  background-color: var(--color-fills-brand-accent1-hover);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:active, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:focus, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:focus-within {
  color: var(--color-fills-brand-accent1-pressed);
  background-color: var(--color-fills-inverse-white);
  border-color: var(--color-fills-brand-accent1-focused);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:active::after, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:focus::after, .hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:focus-within::after {
  background-color: var(--color-fills-brand-accent1-pressed);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:disabled {
  color: var(--color-text-neutral-base);
  background-color: var(--color-fills-neutral-disabled);
  border-color: var(--color-fills-neutral-disabled);
}
.hero--content-left-media.sdc--type-hero--media-full .sdc--type-action-bar .btn--secondary[data-style=outline]:disabled::after {
  background-color: var(--color-text-neutral-base);
}