/**
 *  filename: assets/css/d2r.scss
 *  description: Main styles entry point for Diablo II: Resurrected
 **/
/**
 *  filename: assets/css/index.scss
 *  description: Styles used accross all evergreen pages
 **/
/* Global Breakpoints */
@import url("./breakpoints/breakpoints.css");
/* Global Attributes */
@import url("./breakpoints/breakpoints.attribute.css");
@import url("./aspect-ratio/aspect-ratio.attribute.css");
@import url("../attributes/blz-device/blz-device.css");
@import url("../attributes/blz-tooltip/blz-tooltip.css");
/* Global Classes */
@import url("./utilities/blz-text/blz-text.css");
@import url("./utilities/blz-list/blz-list.css");
@import url("./utilities/blz-table/blz-table.css");
@import url("./utilities/blz-scrollbar/blz-scrollbar.css");
@import url("./input/blz-form.css");
@import url("./input/blz-dropdown.css");
@import url("./input/blz-input.css");
@import url("./input/blz-checkbox.css");
@import url("./input/blz-radio-button.css");
@import url("./themes/_legacy.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@import url("../_legacy.css");
@import url("https://assets.blz-contentstack.com/v3/assets/blte73fa86c52047717/blt3de15bbfd6c3f3c5/5f9ae8766f61200bd103dbfe/navbar.css");
html {
  scroll-behavior: smooth;
}

:root {
  /**
  * @tokens Semantic Font Shorthands
  * @presenter Font
  */
  --semantic-title-text-lg: var(--semantic-title-text-lg-mobile);
  --semantic-title-text-md: var(--semantic-title-text-md-mobile);
  --semantic-title-text-sm: var(--semantic-title-text-sm-mobile);
  --semantic-heading-text-xxl: var(--semantic-heading-text-xl-mobile);
  --semantic-heading-text-xl: var(--semantic-heading-text-xl-mobile);
  --semantic-heading-text-lg: var(--semantic-heading-text-lg-mobile);
  --semantic-heading-text-md: var(--semantic-heading-text-md-mobile);
  --semantic-heading-text-sm: var(--semantic-heading-text-sm-mobile);
  --semantic-subheading-text-lg: var(--semantic-subheading-text-lg-mobile);
  --semantic-subheading-text-md: var(--semantic-subheading-text-md-mobile);
  --semantic-body-text-xxl: var(--semantic-body-text-xxl-mobile);
  --semantic-body-text-xl: var(--semantic-body-text-xl-mobile);
  --semantic-body-text-lg: var(--semantic-body-text-lg-mobile);
  --semantic-body-text-md: var(--semantic-body-text-md-mobile);
  --semantic-body-text-sm: var(--semantic-body-text-sm-mobile);
  --semantic-body-text-xs: var(--semantic-body-text-xs-mobile);
  /**
  * @tokens Component Font Shorthands
  * @presenter Font
  */
  --announcement-banner-font-heading: var(
    --announcement-banner-font-heading-mobile
  );
  --announcement-banner-font-subtext: var(
    --announcement-banner-font-subtext-mobile
  );
  --badge-font-text: var(--badge-font-text-mobile);
  --button-font-label-lg: var(--button-font-label-lg-mobile);
  --button-font-label-md: var(--button-font-label-md-mobile);
  --button-font-label-sm: var(--button-font-label-sm-mobile);
  --content-block-font-subheading-lg: var(
    --content-block-font-subheading-lg-mobile
  );
  --content-block-font-subheading-md: var(
    --content-block-font-subheading-md-mobile
  );
  --content-block-font-heading-lg: var(--content-block-font-heading-lg-mobile);
  --content-block-font-heading-md: var(--content-block-font-heading-md-mobile);
  --content-block-font-heading-sm: var(--content-block-font-heading-sm-mobile);
  --content-block-font-heading-xs: var(--content-block-font-heading-xs-mobile);
  --content-block-font-callout-lg: var(--content-block-font-callout-lg-mobile);
  --content-block-font-callout-md: var(--content-block-font-callout-md-mobile);
  --content-block-font-callout-sm: var(--content-block-font-callout-sm-mobile);
  --content-block-font-callout-xs: var(--content-block-font-callout-xs-mobile);
  --content-block-font-description-lg: var(
    --content-block-font-description-lg-mobile
  );
  --content-block-font-description-md: var(
    --content-block-font-description-md-mobile
  );
  --content-block-font-description-sm: var(
    --content-block-font-description-sm-mobile
  );
  --content-block-font-description-xs: var(
    --content-block-font-description-xs-mobile
  );
  --header-heading-font-xl: var(--header-heading-font-xl-mobile);
  --header-heading-font-lg: var(--header-heading-font-lg-mobile);
  --header-heading-font-md: var(--header-heading-font-md-mobile);
  --header-heading-font-sm: var(--header-heading-font-sm-mobile);
  --header-heading-font-xs: var(--header-heading-font-xs-mobile);
  --header-heading-font-xxs: var(--header-heading-font-xxs-mobile);
  --input-font-md: var(--input-font-md-mobile);
  --input-font-sm: var(--input-font-sm-mobile);
  --tooltip-font-text: var(--tooltip-font-text-mobile);
  --price-font-label-xl: var(--price-font-label-xl-mobile);
  --price-font-label-lg: var(--price-font-label-lg-mobile);
  --price-font-label-md: var(--price-font-label-md-mobile);
  --price-font-label-sm: var(--price-font-label-sm-mobile);
  --price-font-label-discount-xl: var(--price-font-label-discount-xl-mobile);
  --price-font-label-discount-lg: var(--price-font-label-discount-lg-mobile);
  --price-font-label-discount-md: var(--price-font-label-discount-md-mobile);
  --price-font-label-discount-sm: var(--price-font-label-discount-sm-mobile);
  --tab-standard-font-label: var(--tab-standard-font-label-mobile);
  /**
    * @tokens Component Shorthand Spacing Tokens Mobile Values
    * @presenter Spacing
    * 
    */
  --announcement-banner-space-padding: var(
    --announcement-banner-space-padding-mobile
  );
  --announcement-banner-sticky-space-padding: var(
    --announcement-banner-sticky-space-padding-mobile
  );
  --button-space-padding-xl: var(--button-space-padding-xl-mobile);
  --button-space-padding-lg: var(--button-space-padding-lg-mobile);
  --button-space-padding-md: var(--button-space-padding-md-mobile);
  --base-card-space-padding-lg: var(--base-card-space-padding-lg-mobile);
  --base-card-space-padding-md: var(--base-card-space-padding-md-mobile);
  --base-card-space-padding-sm: var(--base-card-space-padding-sm-mobile);
  --badge-space-padding-md: var(--badge-space-padding-md-mobile);
  --content-block-row-gap-margin-top: var(
    --content-block-row-gap-margin-top-mobile
  );
  --section-padding: var(--semantic-section-space-vertical-md-mobile)
    var(--semantic-section-space-horizontal-mobile);
  /**
  * @tokens Component Shorthand Sizing Tokens For Mobile Sizes
  * @presenter Size
  */
  --button-height-md: var(--button-height-md-mobile);
  --button-height-sm: var(--button-height-sm-mobile);
  --countdown-timer-height-sm: var(--countdown-timer-height-sm-mobile);
}

@media (min-width: 720px) {
  :root {
    /**
    * @tokens Legacy Font Sizes
    * @presenter Font Sizes
    * @deprecated
    */
    --font-size-100: var(--font-size-100-sm);
    --font-size-200: var(--font-size-200-sm);
    --font-size-300: var(--font-size-300-sm);
    --font-size-400: var(--font-size-400-sm);
    --font-size-500: var(--font-size-500-sm);
    --font-size-600: var(--font-size-600-sm);
    --font-size-700: var(--font-size-700-sm);
    --font-size-800: var(--font-size-800-sm);
    --font-size-900: var(--font-size-900-sm);
    /**
    * @tokens Legacy Resize Spacing
    * @presenter Spacing
    * @deprecated
    */
    --resize-250: var(--resize-250-sm);
    --resize-300: var(--resize-300-sm);
    --resize-400: var(--resize-400-sm);
    --resize-500: var(--resize-500-sm);
    --resize-600: var(--resize-600-sm);
    --resize-700: var(--resize-700-sm);
    --resize-800: var(--resize-800-sm);
    --resize-900: var(--resize-900-sm);
    --resize-1000: var(--resize-1000-sm);
    /**
    * @tokens Spacing
    * @presenter Spacing
    * @deprecated
    * TODO: Remove in v4
    */
    --row-gap-spacious: var(--row-gap-spacious-sm);
    --col-gap-spacious: var(--col-gap-spacious-sm);
    --section-padding-vertical: var(--section-padding-vertical-sm);
    --section-padding-horizontal: var(--section-padding-horizontal-sm);
    /**
    * @tokens Component Shorthand Spacing Tokens Desktop Values
    * @presenter Spacing
    * 
    */
    --announcement-banner-space-padding: var(
      --announcement-banner-space-padding-desktop
    );
    --announcement-banner-sticky-space-padding: var(
      --announcement-banner-sticky-space-padding-desktop
    );
    --button-space-padding-xl: var(--button-space-padding-xl-desktop);
    --button-space-padding-lg: var(--button-space-padding-lg-desktop);
    --button-space-padding-md: var(--button-space-padding-md-desktop);
    --base-card-space-padding-lg: var(--base-card-space-padding-lg-desktop);
    --base-card-space-padding-md: var(--base-card-space-padding-md-desktop);
    --base-card-space-padding-sm: var(--base-card-space-padding-sm-desktop);
    --badge-space-padding-md: var(--badge-space-padding-md-desktop);
    --content-block-row-gap-margin-top: var(
      --content-block-row-gap-margin-top-desktop
    );
    --section-padding: var(--semantic-section-space-vertical-md-desktop)
      var(--semantic-section-space-horizontal-desktop);
    /**
    * @tokens Component Shorthand Sizing Tokens Desktop Values
    * @presenter Size
    */
    --button-height-md: var(--button-height-md-desktop);
    --button-height-sm: var(--button-height-sm-desktop);
    --countdown-timer-height-sm: var(--countdown-timer-height-sm-desktop);
    /**
    * @tokens Semantic Font Shorthands
    * @presenter Font
    */
    --semantic-title-text-lg: var(--semantic-title-text-lg-desktop);
    --semantic-title-text-md: var(--semantic-title-text-md-desktop);
    --semantic-title-text-sm: var(--semantic-title-text-sm-desktop);
    --semantic-heading-text-xxl: var(--semantic-heading-text-xxl-desktop);
    --semantic-heading-text-xl: var(--semantic-heading-text-xl-desktop);
    --semantic-heading-text-lg: var(--semantic-heading-text-lg-desktop);
    --semantic-heading-text-md: var(--semantic-heading-text-md-desktop);
    --semantic-heading-text-sm: var(--semantic-heading-text-sm-desktop);
    --semantic-subheading-text-lg: var(--semantic-subheading-text-lg-desktop);
    --semantic-subheading-text-md: var(--semantic-subheading-text-md-desktop);
    --semantic-body-text-xxl: var(--semantic-body-text-xxl-desktop);
    --semantic-body-text-xl: var(--semantic-body-text-xl-desktop);
    --semantic-body-text-lg: var(--semantic-body-text-lg-desktop);
    --semantic-body-text-md: var(--semantic-body-text-md-desktop);
    --semantic-body-text-sm: var(--semantic-body-text-sm-desktop);
    --semantic-body-text-xs: var(--semantic-body-text-xs-desktop);
    /**
    * @tokens Component Font Shorthands
    * @presenter Font
    */
    --announcement-banner-font-heading: var(
      --announcement-banner-font-heading-desktop
    );
    --announcement-banner-font-subtext: var(
      --announcement-banner-font-subtext-desktop
    );
    --badge-font-text: var(--badge-font-text-desktop);
    --button-font-label-lg: var(--button-font-label-lg-desktop);
    --button-font-label-md: var(--button-font-label-md-desktop);
    --button-font-label-sm: var(--button-font-label-sm-desktop);
    --content-block-font-subheading-lg: var(
      --content-block-font-subheading-lg-desktop
    );
    --content-block-font-subheading-md: var(
      --content-block-font-subheading-md-desktop
    );
    --content-block-font-heading-lg: var(
      --content-block-font-heading-lg-desktop
    );
    --content-block-font-heading-md: var(
      --content-block-font-heading-md-desktop
    );
    --content-block-font-heading-sm: var(
      --content-block-font-heading-sm-desktop
    );
    --content-block-font-heading-xs: var(
      --content-block-font-heading-xs-desktop
    );
    --content-block-font-callout-lg: var(
      --content-block-font-callout-lg-desktop
    );
    --content-block-font-callout-md: var(
      --content-block-font-callout-md-desktop
    );
    --content-block-font-callout-sm: var(
      --content-block-font-callout-sm-desktop
    );
    --content-block-font-callout-xs: var(
      --content-block-font-callout-xs-desktop
    );
    --content-block-font-description-lg: var(
      --content-block-font-description-lg-desktop
    );
    --content-block-font-description-md: var(
      --content-block-font-description-md-desktop
    );
    --content-block-font-description-sm: var(
      --content-block-font-description-sm-desktop
    );
    --content-block-font-description-xs: var(
      --content-block-font-description-xs-desktop
    );
    --header-heading-font-xl: var(--header-heading-font-xl-desktop);
    --header-heading-font-lg: var(--header-heading-font-lg-desktop);
    --header-heading-font-md: var(--header-heading-font-md-desktop);
    --header-heading-font-sm: var(--header-heading-font-sm-desktop);
    --header-heading-font-xs: var(--header-heading-font-xs-desktop);
    --header-heading-font-xxs: var(--header-heading-font-xxs-desktop);
    --input-font-md: var(--input-font-md-desktop);
    --input-font-sm: var(--input-font-sm-desktop);
    --tooltip-font-text: var(--tooltip-font-text-desktop);
    --price-font-label-xl: var(--price-font-label-xl-desktop);
    --price-font-label-lg: var(--price-font-label-lg-desktop);
    --price-font-label-md: var(--price-font-label-md-desktop);
    --price-font-label-sm: var(--price-font-label-sm-desktop);
    --price-font-label-discount-xl: var(--price-font-label-discount-xl-desktop);
    --price-font-label-discount-lg: var(--price-font-label-discount-lg-desktop);
    --price-font-label-discount-md: var(--price-font-label-discount-md-desktop);
    --price-font-label-discount-sm: var(--price-font-label-discount-sm-desktop);
    --tab-standard-font-label: var(--tab-standard-font-label-desktop);
  }
}
@media (min-width: 960px) {
  :root {
    /**
    * @tokens Spacing
    * @presenter Spacing
    * @deprecated
    * TODO: Remove in v4
    */
    --row-gap-tight: var(--row-gap-tight-md);
    --col-gap-tight: var(--col-gap-tight-md);
    --row-gap-comfy: var(--row-gap-comfy-md);
    --col-gap-comfy: var(--col-gap-comfy-md);
    --row-gap-loose: var(--row-gap-loose-md);
    --col-gap-loose: var(--col-gap-loose-md);
    --row-gap-spacious: var(--row-gap-spacious-md);
    --col-gap-spacious: var(--col-gap-spacious-md);
    --section-padding-vertical: var(--section-padding-vertical-md);
    --section-padding-horizontal: var(--section-padding-horizontal-md);
    --nav-height: var(--nav-height-md);
  }
}
@media (min-width: 1200px) {
  :root {
    /**
    * @tokens Spacing
    * @presenter Spacing
    * @deprecated
    * TODO: Remove in v4
    */
    --row-gap-spacious: var(--row-gap-spacious-lg);
    --col-gap-spacious: var(--col-gap-spacious-lg);
  }
}
:root {
  /**
  * @tokens Misc Spacing
  * @presenter Spacing
  * @deprecated
  * TODO: Remove in v4
  */
  --content-width-slim: 960px;
  --content-width-narrow: 1200px;
  --content-width-default: 1400px;
  --content-width-wide: 1600px;
  --nav-height: var(--global-size-700);
  --row-gap-tight: var(--global-size-150);
  --col-gap-tight: var(--global-size-150);
  --row-gap-comfy: var(--global-size-200);
  --col-gap-comfy: var(--global-size-200);
  --row-gap-loose: var(--global-size-400);
  --col-gap-loose: var(--global-size-400);
  --row-gap-spacious: var(--global-size-300);
  --col-gap-spacious: var(--global-size-300);
  --row-gap-tight-md: var(--global-size-200);
  --col-gap-tight-md: var(--global-size-200);
  --row-gap-comfy-md: var(--global-size-400);
  --col-gap-comfy-md: var(--global-size-400);
  --row-gap-loose-md: var(--global-size-600);
  --col-gap-loose-md: var(--global-size-600);
  --row-gap-spacious-md: var(--global-size-500);
  --col-gap-spacious-md: var(--global-size-500);
  --row-gap-spacious-lg: var(--global-size-1000);
  --col-gap-spacious-lg: var(--global-size-1000);
  --row-gap-spacious-sm: var(--global-size-400);
  --col-gap-spacious-sm: var(--global-size-400);
  --section-padding-vertical: var(--global-size-500);
  --section-padding-horizontal: var(--global-size-200);
  --section-padding-vertical-md: var(--global-size-1000);
  --section-padding-horizontal-md: var(--global-size-500);
  --section-padding-vertical-sm: var(--global-size-800);
  --section-padding-horizontal-sm: var(--global-size-300);
  --tooltip-horizontal-padding: var(--global-size-150);
  --tooltip-max-width: min(
    calc(100vw - (var(--tooltip-horizontal-padding) * 6)),
    calc(360px - var(--tooltip-horizontal-padding) * 2)
  );
  --tooltip-offset: var(--global-size-150);
  --tooltip-vertical-transform: calc(100% + var(--tooltip-offset));
  --nav-height-md: var(--global-size-1100);
  /**
    * @tokens Shadow
    * @presenter Shadow
    */
  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 12%);
  --shadow-sm: 0 4px 6px 0 rgb(0 0 0 / 12%);
  --shadow-md: 0 5px 15px 0 rgb(0 0 0 / 12%);
  --shadow-lg: 0 10px 24px 0 rgb(0 0 0 / 12%);
  --shadow-xl: 0 15px 35px 0 rgb(0 0 0 / 12%);
  /**
    * @tokens Z-Index
    */
  --measure-z-index-below: -1;
  --measure-z-index-base: 0;
  --measure-z-index-above: 1;
  --measure-z-index-docked: 4;
  --measure-z-index-fixed: 10;
  --measure-z-index-overlay: 50;
  --measure-z-index-menu: 999;
  --measure-z-index-modal: 10000;
  --measure-z-index-toast: 11000;
  /**
  * @tokens Global Motion
  * @presenter Motion
  */
  --global-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --global-motion-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --global-motion-ease-in: cubic-bezier(0.8, 0, 1, 1);
  --global-motion-duration-fast: 100ms;
  --global-motion-duration-medium: 200ms;
  --global-motion-duration-slow: 300ms;
  /**
    * @tokens Viewport
    */
  --view-min: 320px;
  --view-xs: 480px;
  --view-sm: 720px;
  --view-md: 960px;
  --view-lg: 1200px;
  --view-xl: 1400px;
  --view-xxl: 1600px;
  --view-max: 2600px;
  /**
  * @tokens Global Spacing
  * @presenter Spacing
  * FIXME: In v4 these should map directly to value
  */
  --global-size-25: 2px;
  --global-size-50: 4px;
  --global-size-75: 6px;
  --global-size-100: 8px;
  --global-size-125: 10px;
  --global-size-150: 12px;
  --global-size-200: 16px;
  --global-size-250: 20px;
  --global-size-300: 24px;
  --global-size-325: 26px;
  --global-size-350: 28px;
  --global-size-400: 32px;
  --global-size-500: 40px;
  --global-size-600: 48px;
  --global-size-700: 56px;
  --global-size-800: 64px;
  --global-size-900: 72px;
  --global-size-1000: 80px;
  --global-size-1100: 88px;
  --global-size-1150: 92px;
  /**
  * @tokens Semantic Spacing
  * @presenter Spacing
  */
  --semantic-space-around-vertical-xxs-desktop: var(--global-size-100);
  --semantic-space-around-vertical-xxs-mobile: var(--global-size-50);
  --semantic-space-around-vertical-xs-desktop: var(--global-size-125);
  --semantic-space-around-vertical-xs-mobile: var(--global-size-100);
  --semantic-space-around-vertical-sm-desktop: var(--global-size-200);
  --semantic-space-around-vertical-sm-mobile: var(--global-size-150);
  --semantic-space-around-vertical-md-desktop: var(--global-size-250);
  --semantic-space-around-vertical-md-mobile: var(--global-size-200);
  --semantic-space-around-vertical-lg-desktop: var(--global-size-300);
  --semantic-space-around-vertical-lg-mobile: var(--global-size-200);
  --semantic-space-around-vertical-xl-desktop: var(--global-size-400);
  --semantic-space-around-vertical-xl-mobile: var(--global-size-250);
  --semantic-space-around-vertical-xxl-desktop: var(--global-size-500);
  --semantic-space-around-vertical-xxl-mobile: var(--global-size-500);
  --semantic-space-around-horizontal-xxxs: var(--global-size-50);
  --semantic-space-around-horizontal-xxs: var(--global-size-100);
  --semantic-space-around-horizontal-xs: var(--global-size-150);
  --semantic-space-around-horizontal-sm: var(--global-size-200);
  --semantic-space-around-horizontal-md-desktop: var(--global-size-250);
  --semantic-space-around-horizontal-md-mobile: var(--global-size-250);
  --semantic-space-around-horizontal-lg-desktop: var(--global-size-300);
  --semantic-space-around-horizontal-lg-mobile: var(--global-size-200);
  --semantic-space-around-horizontal-xl-desktop: var(--global-size-400);
  --semantic-space-around-horizontal-xl-mobile: var(--global-size-300);
  --semantic-space-around-horizontal-xxl-desktop: var(--global-size-500);
  --semantic-space-around-horizontal-xxl-mobile: var(--global-size-400);
  --semantic-space-between-xxxs: var(--global-size-75);
  --semantic-space-between-xxs: var(--global-size-100);
  --semantic-space-between-xs: var(--global-size-150);
  --semantic-space-between-sm: var(--global-size-200);
  --semantic-space-between-md: var(--global-size-300);
  --semantic-space-between-lg: var(--global-size-400);
  --semantic-space-between-xl: var(--global-size-500);
  --semantic-space-between-xxl: var(--global-size-600);
  --semantic-space-between-xxxl: var(--global-size-700);
  --semantic-content-space-xs: var(--global-size-75);
  --semantic-content-space-sm: var(--global-size-150);
  --semantic-content-space-md: var(--global-size-200);
  --semantic-content-space-lg-desktop: var(--global-size-300);
  --semantic-content-space-lg-mobile: var(--global-size-200);
  --semantic-section-space-horizontal-desktop: var(--global-size-500);
  --semantic-section-space-horizontal-tablet: var(--global-size-300);
  --semantic-section-space-horizontal-mobile: var(--global-size-200);
  --semantic-section-space-vertical-sm-desktop: var(--global-size-500);
  --semantic-section-space-vertical-sm-mobile: var(--global-size-500);
  --semantic-section-space-vertical-md-desktop: var(--global-size-1000);
  --semantic-section-space-vertical-md-mobile: var(--global-size-500);
  --semantic-section-space-vertical-lg: var(--global-size-1100);
  --semantic-header-margin-space-md-desktop: var(--global-size-500);
  --semantic-header-margin-space-md-mobile: var(--global-size-400);
  --semantic-header-margin-space-lg-desktop: var(--global-size-700);
  --semantic-header-margin-space-lg-mobile: var(--global-size-500);
  --semantic-header-margin-space-xl-desktop: var(--global-size-900);
  --semantic-header-margin-space-xl-mobile: var(--global-size-600);
  --semantic-grid-gap-xxs-desktop: var(--global-size-100);
  --semantic-grid-gap-xxs-mobile: var(--global-size-50);
  --semantic-grid-gap-xs-desktop: var(--global-size-200);
  --semantic-grid-gap-xs-mobile: var(--global-size-150);
  --semantic-grid-gap-sm-desktop: var(--global-size-300);
  --semantic-grid-gap-sm-mobile: var(--global-size-200);
  --semantic-grid-gap-md-desktop: var(--global-size-400);
  --semantic-grid-gap-md-mobile: var(--global-size-200);
  --semantic-grid-gap-lg-desktop: var(--global-size-600);
  --semantic-grid-gap-lg-mobile: var(--global-size-400);
  --semantic-grid-gap-xl-desktop: var(--global-size-1000);
  --semantic-grid-gap-xl-mobile: var(--global-size-300);
  /**
    * @tokens Component Spacing Tokens Desktop/Mobile Values
    * @presenter Spacing
    */
  --announcement-banner-space-padding-desktop: var(
      --semantic-space-around-vertical-xxl-desktop
    )
    var(--semantic-space-around-horizontal-lg-desktop);
  --announcement-banner-space-padding-mobile: var(
      --semantic-space-around-vertical-xxl-mobile
    )
    var(--semantic-space-around-horizontal-lg-mobile);
  --announcement-banner-sticky-space-padding-desktop: var(
      --semantic-space-around-vertical-lg-desktop
    )
    var(--semantic-space-around-horizontal-lg-desktop);
  --announcement-banner-sticky-space-padding-mobile: var(
      --semantic-space-around-vertical-lg-mobile
    )
    var(--semantic-space-around-horizontal-lg-mobile);
  --button-space-padding-xl-desktop: var(
      --semantic-space-around-vertical-sm-desktop
    )
    var(--semantic-space-around-horizontal-xxl-desktop);
  --button-space-padding-xl-mobile: var(
      --semantic-space-around-vertical-xl-mobile
    )
    var(--semantic-space-around-horizontal-xxl-mobile);
  --button-space-padding-lg-desktop: var(
      --semantic-space-around-vertical-md-desktop
    )
    var(--semantic-space-around-horizontal-xxl-desktop);
  --button-space-padding-lg-mobile: var(
      --semantic-space-around-vertical-xl-mobile
    )
    var(--semantic-space-around-horizontal-xxl-mobile);
  --button-space-padding-md-desktop: var(
      --semantic-space-around-vertical-sm-desktop
    )
    var(--semantic-space-around-horizontal-xl-desktop);
  --button-space-padding-md-mobile: var(
      --semantic-space-around-vertical-sm-mobile
    )
    var(--semantic-space-around-horizontal-xl-mobile);
  --base-card-space-padding-lg-desktop: var(
      --semantic-space-around-vertical-lg-desktop
    )
    var(--semantic-space-around-horizontal-lg-desktop);
  --base-card-space-padding-lg-mobile: var(
      --semantic-space-around-vertical-xl-mobile
    )
    var(--semantic-space-around-horizontal-md-mobile);
  --base-card-space-padding-md-desktop: var(
      --semantic-space-around-vertical-md-desktop
    )
    var(--semantic-space-around-horizontal-md-desktop);
  --base-card-space-padding-md-mobile: var(
      --semantic-space-around-vertical-md-mobile
    )
    var(--semantic-space-around-horizontal-sm);
  --base-card-space-padding-sm-desktop: var(
      --semantic-space-around-vertical-sm-desktop
    )
    var(--semantic-space-around-horizontal-sm);
  --base-card-space-padding-sm-mobile: var(
      --semantic-space-around-vertical-md-mobile
    )
    var(--semantic-space-around-horizontal-sm);
  --badge-space-padding-md-desktop: var(
      --semantic-space-around-vertical-xxs-desktop
    )
    var(--semantic-space-around-horizontal-xxs)
    var(--semantic-space-around-vertical-xs-mobile)
    var(--semantic-space-around-horizontal-xxs);
  --badge-space-padding-md-mobile: var(
      --semantic-space-around-vertical-xs-mobile
    )
    var(--semantic-space-around-horizontal-xxs)
    var(--semantic-space-around-vertical-xs-mobile)
    var(--semantic-space-around-horizontal-xxs);
  --badge-space-padding-sm: var(--global-size-25)
    var(--semantic-space-around-horizontal-xxxs) var(--global-size-25)
    var(--semantic-space-around-horizontal-xxxs);
  --content-block-row-gap-margin-top-desktop: var(--semantic-space-between-md);
  --content-block-row-gap-margin-top-mobile: var(--semantic-space-between-md);
  /**
    * @tokens Component Spacing Tokens
    * @presenter Spacing 
    */
  --button-space-padding-sm: var(--semantic-space-around-vertical-xs-desktop)
    var(--semantic-space-around-horizontal-sm);
  --base-card-space-media-top-left: var(
      --semantic-space-around-vertical-xs-mobile
    )
    0 0 var(--semantic-space-around-horizontal-xxs);
  --base-card-space-media-top-right: var(
      --semantic-space-around-vertical-xs-mobile
    )
    var(--semantic-space-around-horizontal-xxs) 0 0;
  --base-card-space-media-bottom-left: 0 0
    var(--semantic-space-around-vertical-xs-mobile)
    var(--semantic-space-around-horizontal-xxs);
  --base-card-space-media-bottom-right: 0
    var(--semantic-space-around-horizontal-xxs)
    var(--semantic-space-around-vertical-xs-mobile) 0;
  --content-block-description-space-margin-top: var(
    --semantic-content-space-md
  );
  --input-text-field-space-padding-sm: 0
    var(--semantic-space-around-horizontal-xxs) 0
    var(--semantic-space-around-horizontal-sm);
  --input-text-field-space-padding-md: 0
    var(--semantic-space-around-horizontal-xxs) 0
    var(--semantic-space-around-horizontal-sm);
  --input-select-space-padding-sm: 0 var(--semantic-space-around-horizontal-xxs)
    0 var(--semantic-space-around-horizontal-sm);
  --input-select-space-padding-md: 0 var(--semantic-space-around-horizontal-xxs)
    0 var(--semantic-space-around-horizontal-sm);
  --input-selection-label-gap: var(--semantic-space-between-xs);
  /**
  * @tokens Semantic Sizing
  * @presenter Size
  */
  --semantic-size-input-width-lg-desktop: var(--global-size-900);
  --semantic-size-input-width-lg-mobile: var(--global-size-600);
  --semantic-size-input-width-sm-desktop: var(--global-size-500);
  --semantic-size-input-width-sm-mobile: var(--global-size-400);
  --semantic-size-input-height-xxl: var(--global-size-1000);
  --semantic-size-input-height-xl-desktop: var(--global-size-900);
  --semantic-size-input-height-xl-mobile: var(--global-size-600);
  --semantic-size-input-height-lg-desktop: var(--global-size-900);
  --semantic-size-input-height-lg-mobile: var(--global-size-800);
  --semantic-size-input-height-md-desktop: var(--global-size-700);
  --semantic-size-input-height-md-mobile: var(--global-size-600);
  --semantic-size-input-height-sm-desktop: var(--global-size-500);
  --semantic-size-input-height-sm-mobile: var(--global-size-500);
  --semantic-size-input-height-xs-desktop: var(--global-size-500);
  --semantic-size-input-height-xs-mobile: var(--global-size-400);
  /**
  * @tokens Component Sizing
  * @presenter Size
  */
  --button-height-md-desktop: var(--semantic-size-input-height-md-desktop);
  --button-height-md-mobile: var(--semantic-size-input-height-md-mobile);
  --button-height-sm-desktop: var(--semantic-size-input-height-sm-desktop);
  --button-height-sm-mobile: var(--semantic-size-input-height-sm-mobile);
  --countdown-timer-height-sm-desktop: var(
    --semantic-size-input-height-sm-desktop
  );
  --countdown-timer-height-sm-mobile: var(
    --semantic-size-input-height-xs-mobile
  );
  /**
  * @tokens Scale
  * @presenter Spacing
  * TODO: Deprecate legacy font tokens to directly map to value
  */
  --global-font-scale-accent: var(--font-accent-scale);
  --global-font-scale-default: var(--font-default-scale);
  /**
  * @tokens Font Family
  * @presenter FontFamily
  * TODO: Deprecate legacy font tokens to directly map to value
  */
  --global-font-family-accent: var(--font-accent);
  --global-font-family-default: var(--font-default);
  --global-font-family-fallback: var(--font-fallback);
  /**
  * @tokens Font Weight
  * @presenter FontWeight
  * TODO: Deprecate legacy font tokens to directly map to value
  */
  --global-font-weight-bold: 600;
  --global-font-weight-medium: var(--font-accent-weight);
  --global-font-weight-regular: var(--font-default-weight);
  /**
  * @tokens Font Size
  * @presenter FontSize
  */
  --global-font-size-900: 60px;
  --global-font-size-800: 48px;
  --global-font-size-750: 40px;
  --global-font-size-700: 36px;
  --global-font-size-650: 32px;
  --global-font-size-625: 30px;
  --global-font-size-600: 24px;
  --global-font-size-500: 20px;
  --global-font-size-400: 18px;
  --global-font-size-300: 16px;
  --global-font-size-200: 14px;
  --global-font-size-100: 12px;
  --global-font-size-75: 10px;
  /**
  * @tokens Line Height
  * @presenter LineHeight  
  * TODO: Deprecate legacy font tokens to directly map to value
  */
  --global-font-line-height-default: var(--line-height);
  --global-font-line-height-tight: var(--line-height-tight);
  --global-font-line-height-comfy: var(--line-height-comfy);
  --global-font-line-height-relaxed: var(--line-height-relaxed);
  --global-font-line-height-loose: var(--line-height-loose);
  /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
  --global-font-letter-spacing-default: 0;
  --global-font-letter-spacing-comfy: 0.05em;
  --global-font-letter-spacing-relaxed: 0.1em;
  /**
  * @tokens Semantic Font Desktop and Mobile Values
  * @presenter Font
  */
  /* Title */
  --semantic-title-text-lg-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-900) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-title-text-lg-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-700) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-title-text-md-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-800) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-title-text-md-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-625) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-title-text-sm-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-700) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-title-text-sm-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-600) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  /* Heading */
  --semantic-heading-text-xxl-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-650) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-xxl-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-400) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-xl-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-600) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-xl-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-500) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-lg-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-500) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-lg-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-300) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-md-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-400) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-md-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-300) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-sm-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-300) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-sm-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-200) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-xs: var(--global-font-weight-bold)
      calc(var(--global-font-size-200) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-heading-text-xxs: var(--global-font-weight-bold)
      calc(var(--global-font-size-100) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  /* Subheading */
  --semantic-subheading-text-lg-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-200) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-subheading-text-lg-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-100) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-subheading-text-md-desktop: var(--global-font-weight-bold)
      calc(var(--global-font-size-100) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-subheading-text-md-mobile: var(--global-font-weight-bold)
      calc(var(--global-font-size-75) * var(--global-font-scale-accent)) /
      var(--global-font-line-height-tight) var(--global-font-family-accent),
    var(--global-font-family-fallback);
  --semantic-subheading-letter-spacing: var(
    --global-font-letter-spacing-default
  );
  /* Body */
  --semantic-body-text-xxl-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-600) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-xxl-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-500) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-xl-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-500) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-xl-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-300) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-lg-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-400) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-lg-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-300) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-md-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-300) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-md-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-200) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-sm-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-200) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-sm-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-100) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-xs-desktop: var(--global-font-weight-regular)
      calc(var(--global-font-size-100) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  --semantic-body-text-xs-mobile: var(--global-font-weight-regular)
      calc(var(--global-font-size-75) * var(--global-font-scale-default)) /
      var(--global-font-line-height-comfy) var(--global-font-family-default),
    var(--global-font-family-fallback);
  /**
  * @tokens Component Font Desktop and Mobile Values
  * @presenter Font
  */
  --announcement-banner-font-heading-desktop: var(
    --semantic-heading-text-xl-desktop
  );
  --announcement-banner-font-heading-mobile: var(
    --semantic-heading-text-xl-mobile
  );
  --announcement-banner-font-subtext-desktop: var(
    --semantic-body-text-md-desktop
  );
  --announcement-banner-font-subtext-mobile: var(
    --semantic-body-text-md-mobile
  );
  --badge-font-text-desktop: var(--semantic-subheading-text-lg-desktop);
  --badge-font-text-mobile: var(--semantic-subheading-text-lg-mobile);
  --content-block-font-subheading-lg-desktop: var(
    --semantic-subheading-text-lg-desktop
  );
  --content-block-font-subheading-lg-mobile: var(
    --semantic-subheading-text-lg-desktop
  );
  --content-block-font-subheading-md-desktop: var(
    --semantic-subheading-text-md-desktop
  );
  --content-block-font-subheading-md-mobile: var(
    --semantic-subheading-text-lg-mobile
  );
  --content-block-font-heading-lg-desktop: var(
    --semantic-title-text-sm-desktop
  );
  --content-block-font-heading-lg-mobile: var(--semantic-title-text-sm-mobile);
  --content-block-font-heading-md-desktop: var(
    --semantic-heading-text-xl-desktop
  );
  --content-block-font-heading-md-mobile: var(
    --semantic-heading-text-xl-mobile
  );
  --content-block-font-heading-sm-desktop: var(
    --semantic-heading-text-lg-desktop
  );
  --content-block-font-heading-sm-mobile: var(
    --semantic-heading-text-lg-desktop
  );
  --content-block-font-heading-xs-desktop: var(--semantic-heading-text-xs);
  --content-block-font-heading-xs-mobile: var(--semantic-heading-text-xs);
  --content-block-font-description-lg-desktop: var(
    --semantic-body-text-md-desktop
  );
  --content-block-font-description-lg-mobile: var(
    --semantic-body-text-md-mobile
  );
  --content-block-font-description-md-desktop: var(
    --semantic-body-text-md-desktop
  );
  --content-block-font-description-md-mobile: var(
    --semantic-body-text-md-mobile
  );
  --content-block-font-description-sm-desktop: var(
    --semantic-body-text-md-desktop
  );
  --content-block-font-description-sm-mobile: var(
    --semantic-body-text-md-mobile
  );
  --content-block-font-description-xs-desktop: var(
    --semantic-body-text-xs-desktop
  );
  --content-block-font-description-xs-mobile: var(
    --semantic-body-text-sm-mobile
  );
  --content-block-font-callout-lg-desktop: var(--semantic-body-text-md-desktop);
  --content-block-font-callout-lg-mobile: var(--semantic-body-text-md-mobile);
  --content-block-font-callout-md-desktop: var(--semantic-body-text-md-desktop);
  --content-block-font-callout-md-mobile: var(--semantic-body-text-md-mobile);
  --content-block-font-callout-sm-desktop: var(--semantic-body-text-md-desktop);
  --content-block-font-callout-sm-mobile: var(--semantic-body-text-md-mobile);
  --content-block-font-callout-xs-desktop: var(--semantic-body-text-xs-desktop);
  --content-block-font-callout-xs-mobile: var(--semantic-body-text-sm-mobile);
  --button-font-label-xl-desktop: var(--semantic-title-text-sm-desktop);
  --button-font-label-xl-mobile: var(--semantic-title-text-sm-mobile);
  --button-font-label-lg-desktop: var(--semantic-heading-text-xl-desktop);
  --button-font-label-lg-mobile: var(--semantic-heading-text-xl-mobile);
  --button-font-label-md-desktop: var(--semantic-heading-text-lg-desktop);
  --button-font-label-md-mobile: var(--semantic-heading-text-lg-mobile);
  --button-font-label-sm-desktop: var(--semantic-heading-text-sm-desktop);
  --button-font-label-sm-mobile: var(--semantic-heading-text-sm-mobile);
  --header-heading-font-xl-desktop: var(--semantic-title-text-lg-desktop);
  --header-heading-font-xl-mobile: var(--semantic-title-text-lg-mobile);
  --header-heading-font-lg-desktop: var(--semantic-title-text-md-desktop);
  --header-heading-font-lg-mobile: var(--semantic-title-text-lg-mobile);
  --header-heading-font-md-desktop: var(--semantic-title-text-sm-desktop);
  --header-heading-font-md-mobile: var(--semantic-title-text-sm-mobile);
  --header-heading-font-sm-desktop: var(--semantic-heading-text-xl-desktop);
  --header-heading-font-sm-mobile: var(--semantic-heading-text-xl-mobile);
  --header-heading-font-xs-desktop: var(--semantic-heading-text-lg-desktop);
  --header-heading-font-xs-mobile: var(--semantic-heading-text-lg-mobile);
  --header-heading-font-xxs-desktop: var(--semantic-heading-text-md-desktop);
  --header-heading-font-xxs-mobile: var(--semantic-heading-text-lg-mobile);
  --input-font-md-desktop: var(--semantic-heading-text-lg-desktop);
  --input-font-md-mobile: var(--semantic-heading-text-lg-mobile);
  --input-font-sm-desktop: var(--semantic-heading-text-sm-desktop);
  --input-font-sm-mobile: var(--semantic-heading-text-sm-mobile);
  --tooltip-font-text-desktop: var(--semantic-body-text-md-desktop);
  --tooltip-font-text-mobile: var(--semantic-body-text-md-mobile);
  --price-font-label-xl-desktop: var(--semantic-title-text-md-desktop);
  --price-font-label-xl-mobile: var(--semantic-title-text-md-mobile);
  --price-font-label-discount-xl-desktop: var(
    --semantic-heading-text-sm-desktop
  );
  --price-font-label-discount-xl-mobile: var(--semantic-heading-text-md-mobile);
  --price-font-label-lg-desktop: var(--semantic-title-text-sm-desktop);
  --price-font-label-lg-mobile: var(--semantic-title-text-sm-mobile);
  --price-font-label-discount-lg-desktop: var(
    --semantic-heading-text-sm-desktop
  );
  --price-font-label-discount-lg-mobile: var(--semantic-heading-text-md-mobile);
  --price-font-label-md-desktop: var(--semantic-heading-text-xl-desktop);
  --price-font-label-md-mobile: var(--semantic-heading-text-xl-mobile);
  --price-font-label-discount-md-desktop: var(
    --semantic-heading-text-sm-desktop
  );
  --price-font-label-discount-md-mobile: var(--semantic-heading-text-md-mobile);
  --price-font-label-sm-desktop: var(--semantic-heading-text-sm-desktop);
  --price-font-label-sm-mobile: var(--semantic-heading-text-md-mobile);
  --price-font-label-discount-sm-desktop: var(
    --semantic-heading-text-sm-desktop
  );
  --price-font-label-discount-sm-mobile: var(--semantic-heading-text-md-mobile);
  --tab-standard-font-label-desktop: var(--semantic-heading-text-xl-desktop);
  --tab-standard-font-label-mobile: var(--semantic-heading-text-xl-mobile);
  /**
  * @tokens Global Colors
  * @presenter Color
  */
  --global-color-background-25: #d5d7dd;
  --global-color-background-50: #5a5d70;
  --global-color-background-100: #3a465f;
  --global-color-background-300: #323a48;
  --global-color-background-500: #232a39;
  --global-color-background-700: #151c28;
  --global-color-background-800: #0a0d15;
  --global-color-darken-100: : rgb(0 0 0 / 5%);
  --global-color-darken-300: rgb(0 0 0 / 10%);
  --global-color-darken-400: rgb(0 0 0 / 15%);
  --global-color-darken-500: rgb(0 0 0 / 30%);
  --global-color-darken-600: rgb(0 0 0 / 50%);
  --global-color-darken-700: rgb(0 0 0 / 70%);
  --global-color-darken-800: rgb(0 0 0 / 90%);
  --global-color-darken-900: rgb(0 0 0 / 100%);
  --global-color-content-100: rgb(255 255 255 / 5%);
  --global-color-content-200: rgb(255 255 255 / 10%);
  --global-color-content-300: rgb(255 255 255 / 12%);
  --global-color-content-400: rgb(255 255 255 / 15%);
  --global-color-content-500: rgb(255 255 255 / 30%);
  --global-color-content-600: rgb(255 255 255 / 50%);
  --global-color-content-700: rgb(255 255 255 / 70%);
  --global-color-content-800: rgb(255 255 255 / 80%);
  --global-color-content-900: rgb(255 255 255 / 90%);
  --global-color-content-1000: rgb(255 255 255 / 100%);
  --global-color-accent-400: rgb(93 113 152 / 20%);
  --global-color-accent-500: rgb(93 113 152 / 40%);
  --global-color-accent-600: rgb(93 113 152 / 60%);
  --global-color-accent-700: rgb(93 113 152 / 80%);
  --global-color-primary-300: #38a8ff;
  --global-color-primary-400: #0592ff;
  --global-color-primary-500: #0076d1;
  --global-color-primary-600: #00599e;
  --global-color-primary-700: #003c6b;
  --global-color-success-400: #66ffbf;
  --global-color-success-500: #00ff94;
  --global-color-error-400: #f87cb0;
  --global-color-error-500: #f31d77;
  --global-color-error-900: #350000;
  --global-color-warning-400: #ffdd99;
  --global-color-warning-500: #ffbb33;
  /**
      * @tokens Semantic Colors
      * @presenter Color
      */
  --semantic-color-background-action-default-hover: var(
    --global-color-content-300
  );
  --semantic-color-background-action-primary-default: var(
    --global-color-primary-500
  );
  --semantic-color-background-action-primary-hover: var(
    --global-color-primary-400
  );
  --semantic-color-background-action-primary-pressed: var(
    --global-color-primary-400
  );
  --semantic-color-background-action-primary-disabled: var(
    --global-color-primary-400
  );
  --semantic-color-background-action-secondary-default: var(
    --global-color-accent-500
  );
  --semantic-color-background-action-secondary-hover: var(
    --global-color-accent-600
  );
  --semantic-color-background-action-secondary-pressed: var(
    --global-color-accent-600
  );
  --semantic-color-background-action-tertiary-default: "transparent";
  --semantic-color-background-action-tertiary-hover: var(
    --global-color-content-100
  );
  --semantic-color-background-info-primary: var(--global-color-background-100);
  --semantic-color-background-info-secondary: var(
    --global-color-background-800
  );
  --semantic-color-background-info-secondary-hover: var(
    --global-color-background-700
  );
  --semantic-color-background-info-tertiary: var(--global-color-content-100);
  --semantic-color-background-content-default: var(
    --global-color-background-800
  );
  --semantic-color-background-content-hover: var(--global-color-background-700);
  --semantic-color-background-icon-selected: var(--global-color-primary-500);
  --semantic-color-background-icon-hover: var(--global-color-content-1000);
  --semantic-color-background-info-quaternary: var(--global-color-accent-500);
  --semantic-color-background-info-quaternary-hover: var(
    --global-color-accent-600
  );
  --semantic-color-border-action-primary-default: var(
    --global-color-content-200
  );
  --semantic-color-border-action-secondary-default: "transparent";
  --semantic-color-border-action-hover: "transparent";
  --semantic-color-border-action-pressed: var(--global-color-content-300);
  --semantic-color-border-input-default: var(--global-color-darken-400);
  --semantic-color-border-input-hover: var(--global-color-darken-400);
  --semantic-color-border-input-disabled: var(--global-color-content-200);
  --semantic-color-border-input-focus: var(--global-color-primary-400);
  --semantic-color-border-info-primary: var(--global-color-background-100);
  --semantic-color-text-heading: var(--global-color-content-1000);
  --semantic-color-text-description: var(--global-color-content-600);
  --semantic-color-content-default: var(--global-color-content-1000);
  --semantic-color-content-default-dark: var(--global-color-background-800);
  --semantic-color-content-info: var(--global-color-content-700);
  --semantic-color-content-inactive: var(--global-color-content-600);
  --semantic-color-content-placeholder: var(--global-color-content-500);
  --semantic-color-content-callout-primary: var(--global-color-success-500);
  --semantic-color-content-callout-secondary: var(--global-color-warning-500);
  --semantic-color-content-heading-hover: var(--global-color-content-1000);
  --semantic-color-content-success: var(--global-color-success-500);
  --semantic-color-content-warning: var(--global-color-warning-500);
  --semantic-color-content-error: var(--global-color-error-500);
  --semantic-color-content-critical: var(--global-color-error-900);
  --semantic-color-background-page-primary: var(--global-color-background-700);
  --semantic-color-background-page-secondary: var(
    --global-color-background-500
  );
  --semantic-color-background-page-tertiary: var(--global-color-darken-800);
  --semantic-color-accessibility-focus-outer-border: var(
    --global-color-content-1000
  );
  --semantic-color-accessibility-focus-inner-border: var(
    --global-color-background-800
  );
  --semantic-color-feedback-success: var(--global-color-success-400);
  --semantic-color-feedback-warning: var(--global-color-warning-400);
  --semantic-color-feedback-error: var(--global-color-error-400);
  /**
      * @tokens Component Level Colors
      * @presenter Color
      */
  --tooltip-color-border-primary: var(--semantic-color-border-info-primary);
  --badge-color-background-urgent: var(--semantic-color-content-error);
  --badge-color-background-neutral: var(
    --semantic-color-background-info-secondary
  );
  --badge-color-background-positive: var(--semantic-color-content-success);
  --pagination-tab-color-active: var(--semantic-color-content-default);
  --pagination-tab-color-hover: var(--semantic-color-content-info);
  --button-color-border-primary-hover: var(
    --semantic-color-border-action-hover
  );
  --button-color-border-primary-pressed: var(
    --semantic-color-border-action-pressed
  );
  --button-color-border-secondary-hover: var(
    --semantic-color-border-action-hover
  );
  --button-color-border-secondary-pressed: var(
    --semantic-color-border-action-pressed
  );
  --button-color-border-tertiary-default: var(
    --semantic-color-border-action-primary-default
  );
  --button-color-border-tertiary-hover: var(
    --semantic-color-border-action-hover
  );
  --button-color-border-tertiary-disabled: var(
    --semantic-color-background-action-secondary-pressed
  );
  --button-color-border-tertiary-pressed: var(
    --semantic-color-border-action-pressed
  );
  --button-color-text-pressed: var(--semantic-color-content-default);
  --button-color-text-disabled: var(--semantic-color-content-info);
  --game-card-heading-color-text-default: var(--semantic-color-content-default);
  --game-card-heading-color-text-hover: var(
    --semantic-color-content-heading-hover
  );
  --input-color-background-default: var(
    --semantic-color-background-action-secondary-default
  );
  --input-color-background-hover: var(
    --semantic-color-background-action-secondary-pressed
  );
  --input-text-color-disabled: var(--semantic-color-content-inactive);
  --card-backplate-color-background-default: var(
    --semantic-color-background-info-secondary
  );
  --card-backplate-color-background-hover: var(
    --semantic-color-background-info-secondary-hover
  );
  --icon-button-color-default-background: var(
    --semantic-color-background-info-tertiary
  );
  --icon-button-color-contrast-background: var(
    --semantic-color-background-action-secondary-default
  );
  --icon-button-color-default-background-hover: var(
    --semantic-color-background-action-default-hover
  );
  --icon-button-color-contrast-background-hover: var(
    --semantic-color-background-action-secondary-hover
  );
  --icon-button-color-ghost-background-hover: var(
    --semantic-color-background-action-tertiary-hover
  );
  --icon-button-color-default: var(--semantic-color-content-info);
  --icon-button-color-hover: var(--semantic-color-content-default);
  --icon-color-border-default: var(
    --semantic-color-border-action-secondary-default
  );
  --icon-color-border-hover: var(
    --semantic-color-border-action-secondary-default
  );
  --input-selection-color-background: var(--semantic-color-content-default);
  --input-text-field-color-background-default: var(
    --semantic-color-background-info-quaternary
  );
  --input-text-field-color-background-hover: var(
    --semantic-color-background-info-quaternary-hover
  );
  --dropdown-color-background-default: var(
    --semantic-color-background-info-quaternary
  );
  --dropdown-color-background-hover: var(
    --semantic-color-background-info-quaternary-hover
  );
  --base-card-background-color: var(--global-color-background-100);
  --base-card-background-color-hover: var(--global-color-background-300);
  --base-card-background-color-focus: var(--global-color-background-300);
}

blz-showcase.error-page .background-image {
  bottom: 50px;
}
blz-showcase.error-page h2.blz-heading {
  font-weight: bold;
}
blz-showcase.error-page blz-button {
  background-color: #006FB2;
  border: 1px solid #00AEFF;
  border-radius: 0;
  transition: color 200ms, background-color 200ms, border-color 200ms;
  font-family: "Open Sans";
}
blz-showcase.error-page blz-button:hover, blz-showcase.error-page blz-button:focus, blz-showcase.error-page blz-button:focus-within {
  background-color: #007bc6;
  border: solid 1px #79d4ff;
  color: #fff;
}

/**
 *  filename: lib/fruit/styles/styles.scss
 *  description: --
 **/
/**
 *  filename: lib/fruit/styles/after-before.scss
 *  description: --
 **/
/**
 *  filename: styles/asset-url.scss
 *  description: Returns an akamaized link given the suffix of a Contentstack asset url
 **/
/**
 *  filename: lib/fruit/styles/cms-background.scss
 *  description: --
 **/
/**
 *  filename: styles/jump-link.scss
 *  description: Style that maps to a jumplink
 **/
.jump-link {
  display: block;
  position: relative;
  top: -48px;
}
@media (min-width: 960px) {
  .jump-link {
    top: calc(var(--nav-height) * -1);
  }
}

/**
 *  filename: lib/fruit/styles/main-content.scss
 *  description: --
 **/
.main-content {
  width: 100%;
  max-width: 2600px;
  overflow: hidden;
}

/**
 *  filename: lib/fruit/styles/section.scss
 *  description: --
 **/
.section {
  position: relative;
}

/**
 *  filename: lib/fruit/styles/variables.scss
 *  description: --
 **/
/**
 *  filename: lib/fruit/templates/_blz-tab-control.scss
 *  description: --
 **/
blz-tab-control {
  transition: color 350ms;
}
blz-tab-control blz-image {
  position: relative;
}
blz-tab-control blz-image:after, blz-tab-control blz-image:before {
  opacity: 0;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition: opacity 350ms, filter 350ms;
}
blz-tab-control blz-image:after {
  background-image: var(--icon-active);
  z-index: 2;
}
blz-tab-control blz-image:before {
  background-image: var(--icon-hover);
  z-index: 1;
}
blz-tab-control[active] blz-image:after {
  opacity: 1;
}
blz-tab-control:hover blz-image:before {
  opacity: 1;
}

body {
  margin: 0;
  background: #000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-flow: column;
}

#iconography-block,
#navbar-tokens-block,
#age-gate-tokens-block {
  display: none;
}

:root {
  --global-font-weight-bold: 500;
}

:root[lang=ko-kr] {
  word-break: keep-all;
}

/**
 *  filename: assets/css/shared/components/_blz-age-gate.scss
 *  description: --
 **/
blz-age-gate::part(content) {
  background-position: var(--age-gate-background-position, center);
  background-repeat: var(--age-gate-background-repeat, no-repeat);
  background-size: var(--age-gate-background-size, cover);
  background-image: var(--age-gate-background-mobile);
}
@media (min-width: 960px) {
  blz-age-gate::part(content) {
    background-image: var(--age-gate-background-tablet);
  }
}
@media (min-width: 1400px) {
  blz-age-gate::part(content) {
    background-image: var(--age-gate-background-desktop);
  }
}

/**
 *  filename: assets/css/shared/components/_blz-button.scss
 *  description: --
 **/
blz-button::part(host-anchor) {
  z-index: 1;
  text-transform: uppercase;
}

blz-media-gallery::part(cta-text) {
  text-transform: uppercase;
}

/**
 *  filename: assets/css/shared/components/_blz-card.scss
 *  description: --
 **/
blz-card::part(play-icon) {
  background-image: var(--icon-play-button);
  transition: background-image 350ms;
  background-position: center;
  background-size: contain;
  color: transparent;
}
blz-card:hover::part(play-icon) {
  background-image: var(--icon-play-button-hover);
}

/**
 *  filename: assets/css/shared/components/_blz-carousel.scss
 *  description: --
 **/
blz-carousel::part(left-arrow) {
  background: none;
  background-image: var(--icon-arrow-left);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-carousel::part(left-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left);
}
blz-carousel::part(left-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left-hover);
  opacity: 0;
}
blz-carousel::part(left-arrow):hover:after, blz-carousel::part(left-arrow):focus:after {
  opacity: 1;
}
blz-carousel::part(right-arrow) {
  background: none;
  background-image: var(--icon-arrow-right);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-carousel::part(right-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right);
}
blz-carousel::part(right-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right-hover);
  opacity: 0;
}
blz-carousel::part(right-arrow):hover:after, blz-carousel::part(right-arrow):focus:after {
  opacity: 1;
}
blz-carousel::part(left-arrow-icon), blz-carousel::part(right-arrow-icon) {
  display: none;
}
blz-carousel::part(main-content) {
  grid-template-columns: [left-arrow-start] auto [left-arrow-end content-start] minmax(0, 1050px) [content-end right-arrow-start] auto [right-arrow-end];
}
blz-carousel::part(bottom-controls) {
  overflow: visible;
}

/**
 *  filename: assets/css/shared/components/_blz-comparison-slider.scss
 *  description: --
 **/
blz-comparison-slider {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
blz-comparison-slider blz-video {
  transform: scale(2);
}
blz-comparison-slider::part(handlebar-container) {
  pointer-events: all;
}
blz-comparison-slider::part(left-arrow), blz-comparison-slider::part(right-arrow) {
  display: none;
}
blz-comparison-slider::part(handle) {
  background-image: var(--icon-slider);
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
}

/**
 *  filename: assets/css/shared/components/_blz-cross-sell.scss
 *  description: --
 **/
blz-cross-sell blz-game-card {
  --global-size-50: 0px;
}
blz-cross-sell [slot=cta] {
  display: flex;
  justify-content: center;
}

/**
 *  filename: assets/css/shared/components/_blz-lightbox.scss
 *  description: --
 **/
blz-lightbox::part(left-arrow) {
  background: none;
  background-image: var(--icon-arrow-left);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-lightbox::part(left-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left);
}
blz-lightbox::part(left-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-left-hover);
  opacity: 0;
}
blz-lightbox::part(left-arrow):hover:after, blz-lightbox::part(left-arrow):focus:after {
  opacity: 1;
}
blz-lightbox::part(right-arrow) {
  background: none;
  background-image: var(--icon-arrow-right);
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  position: relative;
  background-position: center;
}
blz-lightbox::part(right-arrow):before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right);
}
blz-lightbox::part(right-arrow):after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 350ms;
  background-position: center;
  filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
  background-image: var(--icon-arrow-right-hover);
  opacity: 0;
}
blz-lightbox::part(right-arrow):hover:after, blz-lightbox::part(right-arrow):focus:after {
  opacity: 1;
}
blz-lightbox::part(left-arrow-icon), blz-lightbox::part(right-arrow-icon) {
  display: none;
}
blz-lightbox::part(close) {
  position: relative;
  background-color: transparent;
  background-image: var(--icon-close);
  background-size: contain;
  transition: opacity 350ms;
}
blz-lightbox::part(close):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: var(--icon-close-hover);
  background-size: contain;
  opacity: 0;
}
blz-lightbox::part(close):hover:after, blz-lightbox::part(close):focus:after {
  opacity: 1;
}
blz-lightbox::part(close-icon) {
  display: none;
}
blz-lightbox blz-image, blz-lightbox blz-video {
  max-width: 1000px;
  position: relative;
  margin: 20px;
}

@media (min-width: 960px) {
  blz-lightbox blz-image, blz-lightbox blz-video {
    margin: 0 auto;
  }
}
/**
 *  filename: assets/css/shared/components/_blz-masthead.scss
 *  description: --
 **/
blz-masthead [slot=platform] {
  text-shadow: 0 0 20px black;
}
blz-masthead [slot=platform] blz-icon {
  transition: filter 350ms;
}
blz-masthead [slot=platform] blz-icon:hover {
  filter: brightness(1.5);
}
blz-masthead blz-icon-group::part(content) {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

/**
 *  filename: assets/css/shared/components/_blz-video.scss
 *  description: --
 **/
blz-video [slot=thumbnail-play] {
  max-width: 70px;
  filter: drop-shadow(0px 2px 9px black);
}
blz-video [slot=thumbnail-play]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: opacity 350ms;
  background-position: center;
  background-size: contain;
  background-image: var(--icon-play-button-hover);
  opacity: 0;
}
blz-video:hover [slot=thumbnail-play]:after {
  opacity: 1;
}

/**
 *  filename: assets/css/shared/components/_blz-platform-select.scss
 *  description: --
 **/
blz-platform-select::part(close) {
  position: relative;
  background-color: transparent;
  background-image: var(--icon-close);
  background-size: contain;
  transition: opacity 350ms;
}
blz-platform-select::part(close):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: var(--icon-close-hover);
  background-size: contain;
  opacity: 0;
}
blz-platform-select::part(close):hover:after, blz-platform-select::part(close):focus:after {
  opacity: 1;
}
blz-platform-select::part(close-icon) {
  display: none;
}
blz-platform-select::part(platform-button) {
  background-color: var(--navbar-button-color-primary);
  transition: background-color 350ms;
}
blz-platform-select::part(platform-button):hover {
  background-color: var(--navbar-button-color-primary-hover);
}

/**
 *  filename: assets/css/shared/components/_blz-tab-controls.scss
 *  description: --
 **/
blz-tab-controls {
  /** md breakpoint (width > 960px) **/
  /** **/
}
blz-tab-controls::part(tab-content) {
  justify-content: space-evenly;
  align-items: center;
  min-width: 250px;
}
blz-tab-controls[variant=icons]::part(tab-content) {
  --gap: var(--semantic-grid-gap-xs-mobile);
}
@media (min-width: 960px) {
  blz-tab-controls::part(tab-content) {
    justify-content: flex-start;
  }
  blz-tab-controls[variant=icons]::part(tab-content) {
    width: 800px;
    --gap: var(--semantic-grid-gap-sm-desktop);
  }
}

/**
 *  filename: assets/css/shared/components/diablo/_blz-age-gate.scss
 *  description: --
 **/
blz-age-gate::part(select-year), blz-age-gate::part(select-month), blz-age-gate::part(select-day) {
  background-color: rgb(28, 28, 28);
}
blz-age-gate::part(lockout) {
  font-family: "Exocet Reaper";
}
blz-age-gate::part(content) {
  padding-bottom: var(--global-size-500);
}

/**
 *  filename: assets/css/shared/mixins/_icon-colors.scss
 *  description: --
 **/
/**
 *  filename: assets/css/shared/mixins/_multi-bg-feature-carousel.scss
 *  description: Mixin for blz-feature-carousel sections to support backgrounds of different widths + transitions
 **/
/**
 *  filename: assets/css/shared/components/_blz-tab-control.scss
 *  description: --
 **/
blz-tab-control[active] blz-image:after {
  filter: brightness(1.3);
}

/**
 *  filename: assets/css/shared/sections/_masthead-overview.scss
 *  description: --
 **/
.section.masthead-overview > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
  z-index: 1;
}
@media (min-width: 480px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview .section.masthead > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview .section.masthead > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview .section.overview > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.masthead-overview .section.overview > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.masthead-overview blz-masthead[layout=left]::part(section) {
  min-height: max(220vw, 850px);
  justify-content: flex-start;
}
.section.masthead-overview blz-masthead::part(platform) {
  margin-top: 20px;
}
.section.masthead-overview blz-masthead[layout=left]::part(platform) {
  position: relative;
  bottom: 0;
}

@media (min-width: 480px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: max(175vw, 1150px);
  }
}
@media (min-width: 720px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: max(165vw, 1350px);
  }
}
@media (min-width: 960px) {
  .section.masthead-overview blz-masthead[layout=left]::part(section) {
    min-height: 900px;
  }
  .section.masthead-overview blz-masthead[layout=left]::part(platform) {
    position: absolute;
    bottom: var(--size-500);
    margin: 0;
  }
}
/**
 *  filename: assets/css/shared/sections/_optional-feature.scss
 *  description: --
 **/
.section.optional-feature > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.optional-feature > [slot=background] {
    background-image: var(--background-max);
  }
}

/**
 *  filename: assets/css/shared/sections/_optional-feature.scss
 *  description: --
 **/
.section.game-features > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.game-features > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.game-features blz-card {
  background: transparent;
}

/**
 *  filename: assets/css/shared/sections/_carousel-media-gallery.scss
 *  description: --
 **/
.section.carousel-media-gallery > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.carousel-media-gallery > [slot=background] {
    background-image: var(--background-max);
  }
}

/**
 *  filename: assets/css/shared/sections/_cross-sell.scss
 *  description: --
 **/
.section.cross-sell > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.cross-sell > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.cross-sell blz-button-group {
  padding: 0 var(--section-padding-horizontal);
  justify-content: center;
}

/**
 *  filename: assets/css/shared/sections/_outro.scss
 *  description: --
 **/
.section.outro > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.outro > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.outro > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.outro > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.outro > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.outro > [slot=background] {
    background-image: var(--background-max);
  }
}

@media (min-width: 960px) {
  .section.outro blz-header {
    margin-top: 100px;
  }
}
/**
 *  filename: assets/css/shared/sections/_social-footer.scss
 *  description: --
 **/
.section.social-footer > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
  z-index: -1;
}
@media (min-width: 480px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.social-footer > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.social-footer blz-social-section::part(header) {
  text-transform: uppercase;
}

/**
 *  filename: assets/css/shared/sections/_error.scss
 *  description: --
 **/
.section.error > [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.error > [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.error > [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.error > [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.error > [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.error > [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.error > [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.error > [slot=background] {
    background-image: var(--background-max);
  }
}
.section.error blz-video,
.section.error blz-image {
  position: relative;
}
.section.error blz-page-header::part(section) {
  display: flex;
  flex-flow: column;
  gap: 30px;
}
.section.error blz-button-group {
  justify-content: center;
  z-index: 10;
}

@media (min-width: 960px) {
  .section.error blz-video,
  .section.error blz-image {
    max-width: 800px;
  }
}
/**
 *  filename: assets/css/shared/sections/_feature-carousel.scss
 *  description: --
 **/
.section.feature-carousel {
  /** md breakpoint (width > 960px) **/
  /** **/
}
.section.feature-carousel [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block !important;
  background-image: var(--mobile-background);
  transition: opacity 700ms;
  opacity: 0;
}
@media (min-width: 960px) {
  .section.feature-carousel [slot=background] {
    background-image: var(--tablet-background, var(--mobile-background));
  }
}
@media (min-width: 1400px) {
  .section.feature-carousel [slot=background] {
    background-image: var(--desktop-background, var(--tablet-background));
  }
}
.section.feature-carousel [slot=background].background-active {
  opacity: 1;
}
.section.feature-carousel [slot=heading] {
  text-shadow: 0px 0px 10px black, 0px 0px 20px black;
  color: #fff;
}
.section.feature-carousel [slot=description] {
  text-shadow: 0px 0px 10px black, 0px 0px 15px black, 0px 0px 20px black;
}
.section.feature-carousel blz-carousel[slot=mobile-carousel]::part(main-content) {
  min-height: 450px;
  display: flex;
  align-items: flex-end;
}
.section.feature-carousel blz-feature {
  padding-top: 20px;
}
.section.feature-carousel blz-tab-controls {
  overflow: visible;
}
.section.feature-carousel blz-tab-control {
  --icon-size: var(--size-600);
  filter: drop-shadow(0px 3px 8px black) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.4));
}
@media (min-width: 960px) {
  .section.feature-carousel blz-feature-carousel-section::part(section) {
    min-height: 900px;
    display: flex;
    justify-content: center;
  }
  .section.feature-carousel blz-feature-carousel-section > blz-header,
  .section.feature-carousel blz-tab-controls,
  .section.feature-carousel blz-feature {
    padding-left: 20px;
  }
  .section.feature-carousel blz-feature {
    padding-bottom: 20px;
    padding-top: 0px;
    max-width: 620px;
  }
  .section.feature-carousel blz-tab-control {
    --icon-size: var(--size-900);
  }
}

/**
 *  filename: assets/css/d2r/divider.scss
 *  description: Styles for the divider between sections
 **/
.masthead::after, .overview::after, .season::after, .game-features::after, .classes::after, .carousel-media-gallery::after, .outro::after, .cross-sell::after, .error::after {
  content: "";
  width: 100%;
  height: 20px;
  position: relative;
  display: block;
  z-index: 98;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt38278990640daad4/657e2479a326be3f480bc090/section_divider.webp?auto=webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 2600px auto;
}

@media (min-width: 960px) {
  .masthead::after {
    display: none;
  }
}
/**
 *  filename: assets/css/d2r/fonts.scss
 *  description: Fonts & text presets for Diablo II: Remastered
 **/
/**
 *  filename: assets/css/shared/fonts/diablo.scss
 *  description: Fonts shared across the Diablo franchise
 **/
@font-face {
  font-family: "Alegreya Sans";
  font-weight: 500;
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt721dda3062e62f0a/657e45c3d0868427a6bc0a32/AlegreyaSans-Medium.woff?auto=webp);
}
@font-face {
  font-family: "Exocet Reaper";
  font-weight: 500;
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt9b420a58bed922a2/657e45c837a55372bc3f4b0b/ExocetReaper-Medium.otf?auto=webp);
}
@font-face {
  font-family: "Yoon Myungjo";
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt550ca5ce53817634/65de3b8e204af749d52c2f4a/YoonMyungjo230.ttf?auto=webp);
}
@font-face {
  font-family: "Kodia";
  src: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/bltc37ca517d84d5f03/65de3b8e574bda83d5efe347/Kodia_11172.ttf?auto=webp);
}
html:root {
  --font-default: "Alegreya Sans";
  --font-default-scale: 1.1;
  --font-accent: "Exocet Reaper";
}

[slot=heading], [slot=subheading] {
  font-family: "Exocet Reaper", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

[slot=description],
[slot^=content] {
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 500;
}

:root[lang=ko-kr] {
  --font-default: "Kodia";
  --font-accent: "Yoon Myungjo";
}
:root[lang=ko-kr] [slot=heading], :root[lang=ko-kr] [slot=subheading] {
  font-family: "Yoon Myungjo", sans-serif;
  text-transform: uppercase;
}
:root[lang=ko-kr] [slot=description],
:root[lang=ko-kr] [slot^=content] {
  font-family: "Kodia", sans-serif;
  text-transform: uppercase;
}

/**
 *  filename: assets/css/d2r/media.scss
 *  description: --
 **/
[slot=media],
blz-highlights blz-card [slot=image],
blz-comparison-slider,
blz-lightbox [slot^=slide] {
  box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.7);
}
[slot=media]:after,
blz-highlights blz-card [slot=image]:after,
blz-comparison-slider:after,
blz-lightbox [slot^=slide]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  border: 0px solid transparent;
  border-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt876db165a17af51d/657f859b21f66029f2478898/media_border.webp?auto=webp) 187;
  pointer-events: none;
}
[slot=media]::after,
blz-highlights blz-card [slot=image]::after,
blz-comparison-slider::after,
blz-lightbox [slot^=slide]::after {
  border-image-width: 50px;
  box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 15px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 16px #625028;
}

blz-media-gallery blz-card [slot=image],
blz-game-card::part(image),
blz-game-card::part(video) {
  box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.7);
}
blz-media-gallery blz-card [slot=image]:after,
blz-game-card::part(image):after,
blz-game-card::part(video):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  border: 0px solid transparent;
  border-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt876db165a17af51d/657f859b21f66029f2478898/media_border.webp?auto=webp) 187;
  pointer-events: none;
}
blz-media-gallery blz-card [slot=image]:after,
blz-game-card::part(image):after,
blz-game-card::part(video):after {
  border-image-width: 37px;
  box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 11px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 12px #625028;
}
@media (min-width: 960px) {
  blz-media-gallery blz-card [slot=image]:after,
  blz-game-card::part(image):after,
  blz-game-card::part(video):after {
    border-image-width: 50px;
    box-shadow: inset 0px 0px 30px 30px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 16px rgba(0, 0, 0, 0.8), inset 0px 0px 0px 18px #625028;
  }
}

blz-video::part(overlay),
blz-media-gallery blz-lightbox-trigger {
  transition: filter 350ms;
}
blz-video::part(overlay):hover,
blz-media-gallery blz-lightbox-trigger:hover {
  filter: brightness(1.3);
}

blz-video [slot=thumbnail-play] {
  max-width: 114px;
}

/**
 *  filename: assets/css/d2r/components/_blz-button.scss
 *  description: --
 **/
blz-button[type=primary] {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-button[type=primary]::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-button[type=primary] blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-button[type=primary]:hover {
  color: #E9C964;
}
blz-button[type=primary]:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-button[type=primary]:hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-button[type=primary] {
    font-size: 24px;
  }
  blz-button[type=primary] blz-icon {
    width: 24px;
  }
}

blz-button[type=default], blz-media-gallery::part(cta) {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-button[type=default]::part(host-anchor), blz-media-gallery::part(cta)::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-button[type=default] blz-icon, blz-media-gallery::part(cta) blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-button[type=default]:hover, blz-media-gallery::part(cta):hover {
  color: #E9C964;
}
blz-button[type=default]:after, blz-media-gallery::part(cta):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-button[type=default]:hover:after, blz-media-gallery::part(cta):hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-button[type=default], blz-media-gallery::part(cta) {
    font-size: 24px;
  }
  blz-button[type=default] blz-icon, blz-media-gallery::part(cta) blz-icon {
    width: 24px;
  }
}

blz-age-gate::part(age-gate-button) {
  color: #BD9B4E;
  box-shadow: 0px 2px 9px black;
  font-size: 18px;
  text-align: center;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt823db98ed577ce4f/657e4e5fcd72b15f172c1cc1/primary_button_base_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blta83312346c5fab9f/657e4e5f2357a82e5ea05ac0/primary_button_base_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt06dcf8951166656a/657e4e5f619a8e508b5d66e2/primary_button_base_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms, color 350ms;
  padding: 0 40px;
}
blz-age-gate::part(age-gate-button)::part(host-anchor) {
  text-shadow: 0px 2px 9px black, 0px 2px 9px black, 0px 1px 14px black;
  z-index: 2;
}
blz-age-gate::part(age-gate-button) blz-icon {
  filter: drop-shadow(0px 2px 9px black) drop-shadow(0px 2px 9px black) drop-shadow(0px 1px 14px black);
  width: 20px;
}
blz-age-gate::part(age-gate-button):hover {
  color: #E9C964;
}
blz-age-gate::part(age-gate-button):after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: auto 100%;
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-image: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt0545c1ea67fe4f71/657e4e5ffad2f44ae86c5e6c/primary_button_hover_left.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt5ae28cfc42f3f024/657e4e5febf6a1422d4caddb/primary_button_hover_right.webp?auto=webp), url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt16b5e51f9c403b70/657e4e5fd086841a18bc0a36/primary_button_hover_mid.webp?auto=webp);
  transition: opacity 350ms, filter 350ms;
  opacity: 0;
}
blz-age-gate::part(age-gate-button):hover:after {
  opacity: 1;
  filter: brightness(1.2);
}
@media (min-width: 720px) {
  blz-age-gate::part(age-gate-button) {
    font-size: 24px;
  }
  blz-age-gate::part(age-gate-button) blz-icon {
    width: 24px;
  }
}

/**
 *  filename: assets/css/d2r/components/_blz-carousel.scss
 *  description: --
 **/
blz-carousel {
  --semantic-color-content-default: transparent;
  --semantic-color-content-inactive: transparent;
  --pagination-tab-color-hover: transparent;
}
blz-carousel blz-tab-control {
  color: rgba(189, 155, 78, 0.5);
  transition: color 350ms, filter 350ms;
}
blz-carousel blz-tab-control[active] {
  color: #E9C964;
  filter: drop-shadow(0px 0px 2px #E9C964);
}
blz-carousel blz-tab-control[active]::part(tab-control):after {
  background-color: #E9C964;
}
blz-carousel blz-tab-control:hover {
  color: #BD9B4E;
}
blz-carousel::part(tab-control) {
  transition: background-color 350ms, filter 350ms;
  border-radius: 50%;
}
blz-carousel::part(active-tab-control) {
  filter: drop-shadow(0px 0px 2px #E9C964);
  background-color: #E9C964;
}
blz-carousel::part(tab-control):hover {
  background-color: #BD9B4E;
}
blz-carousel::part(active-tab-control):hover {
  background-color: #E9C964;
}
blz-carousel::part(inactive-tab-control) {
  background-color: rgba(189, 155, 78, 0.5);
}

/**
 *  filename: assets/css/d2r/components/_blz-comparison-slider.scss
 *  description: --
 **/
blz-comparison-slider::part(handlebar) {
  width: 6px;
  background: url(https://blz-contentstack-images.akamaized.net/v3/assets/blt0e00eb71333df64e/blt7bea85a26ecd27ff/657e24799ac62071b404b2af/slider_divider.webp?auto=webp) no-repeat center/contain transparent;
  background-size: 19px;
  background-repeat: repeat-y;
  background-position-x: -14.6px;
  position: relative;
}
blz-comparison-slider::part(handle) {
  width: 52px;
  height: 120px;
  background-position: left center;
}
blz-comparison-slider::part(handle):after {
  transition: opacity 350ms;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--icon-slider);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: right center;
  background-size: cover;
  opacity: 0;
}
blz-comparison-slider::part(handle):hover:after {
  opacity: 1;
}
@media (min-width: 480px) {
  blz-comparison-slider::part(handle) {
    width: 65px;
    height: 150px;
  }
}
@media (min-width: 1200px) {
  blz-comparison-slider::part(handle) {
    width: 86px;
    height: 199px;
  }
}

/**
 *  filename: assets/css/d2r/components/_blz-platform-select.scss
 *  description: --
 **/
blz-platform-select::part(logo) {
  background: radial-gradient(ellipse, rgb(80, 19, 0) 30%, rgba(26, 0, 0, 0.1) 60%, rgba(255, 255, 0, 0) 80%);
  clip-path: ellipse(70% 50% at 50%);
}

/**
 *  filename: assets/css/d2r/sections/_carousel-media-gallery.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_cross-sell.scss
 *  description: --
 **/
.section.cross-sell blz-game-card {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.7));
}
.section.cross-sell blz-game-card::part(heading), .section.cross-sell blz-game-card::part(subheading) {
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 500;
}
.section.cross-sell blz-game-card::part(heading) {
  color: rgb(233, 201, 100);
}
.section.cross-sell blz-game-card::part(subheading) {
  color: rgb(209, 209, 209);
}

/**
 *  filename: assets/css/d2r/sections/_error.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_feature_carousel.scss
 *  description: --
 **/
.section.classes [slot=background] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: var(--background-size, cover);
  background-repeat: var(--background-repeat, no-repeat);
  background-position: var(--background-position, center);
  background-image: var(--background-min);
}
@media (min-width: 480px) {
  .section.classes [slot=background] {
    background-image: var(--background-xs);
  }
}
@media (min-width: 720px) {
  .section.classes [slot=background] {
    background-image: var(--background-sm);
  }
}
@media (min-width: 960px) {
  .section.classes [slot=background] {
    background-image: var(--background-md);
  }
}
@media (min-width: 1200px) {
  .section.classes [slot=background] {
    background-image: var(--background-lg);
  }
}
@media (min-width: 1400px) {
  .section.classes [slot=background] {
    background-image: var(--background-xl);
  }
}
@media (min-width: 1600px) {
  .section.classes [slot=background] {
    background-image: var(--background-xxl);
  }
}
@media (min-width: 2600px) {
  .section.classes [slot=background] {
    background-image: var(--background-max);
  }
}
.section.classes [slot=background]:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(ellipse at center, transparent 60%, black), linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0) 83%, rgb(0, 0, 0) 100%), linear-gradient(180deg, rgb(0, 0, 0) 2%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 82%, rgb(0, 0, 0) 100%);
}

@media (min-width: 960px) {
  .section.classes [slot=background]:after {
    background: none;
  }
}
/**
 *  filename: assets/css/d2r/sections/_optional-feature.scss
 *  description: --
 **/
.section.game-features blz-card [slot=image] {
  margin-bottom: 5px;
}

/**
 *  filename: assets/css/d2r/sections/_masthead-overview.scss
 *  description: --
 **/
.section.masthead-overview > [slot=background] {
  display: none;
}

@media (min-width: 960px) {
  .section.masthead-overview > [slot=background] {
    display: block;
  }
  .section.masthead-overview > [slot=background]:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: radial-gradient(circle at 370px 450px, rgba(255, 0, 0, 0.2) 0, transparent 400px);
    max-width: 1600px;
    margin: 0 auto;
  }
}
/**
 *  filename: assets/css/d2r/sections/_optional-feature.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_outro.scss
 *  description: --
 **/
/**
 *  filename: assets/css/d2r/sections/_social-footer.scss
 *  description: --
 **/
.section.masthead blz-icon-group blz-icon, .section.social blz-icon-group blz-icon {
  transition: color 350ms, filter 350ms;
  color: rgb(205, 179, 120);
  filter: drop-shadow(0px 0px 5px rgba(255, 0, 0, 0.5));
}
.section.masthead blz-icon-group blz-icon:hover, .section.social blz-icon-group blz-icon:hover {
  color: rgb(205, 179, 120);
  filter: drop-shadow(0px 0px 8px rgba(255, 0, 0, 0.5)) drop-shadow(0px 0px 2px rgb(255, 0, 0)) brightness(1.5);
}