@mixin root() { ... }@mixin root() { 
  @include mixins.card-container;

  min-height: unit.rem(425px);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: border.get('br02');
  position: relative;
  overflow: hidden;
 }

@mixin title() { ... }@mixin title() { 
  @include typography.style-as('editorial-heading-1', 'strong');
  @include text-shadow;

  color: color.get('text', 'static', 'light', 'primary');
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
 }

@mixin overline() { ... }@mixin overline() { 
  @include typography.style-as('overline');
  @include text-shadow;

  color: color.get('text', 'static', 'light', 'primary');
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
  margin-bottom: spacing.get(s2);
 }

@mixin content() { ... }@mixin content() { 
  margin-top: auto;
  align-items: center;
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: spacing.get(s4);
  padding-top: 0;

  // TODO: Update these values to use tokens when new token with opacity is created. UXE-8673
  background-color: color.get('static', 'gray1', '900a50');

  /// Gradient on top of the content
  &::before {
    content: '';
    position: absolute;
    top: -1 * unit.rem(124px);
    left: 0;
    right: 0;
    height: unit.rem(124px);
    pointer-events: none;
    z-index: 3;

    // TODO: Update these values to use tokens when new token with opacity is created. UXE-8673
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      color.get('static', 'gray1', '900a50') 100%
    );
  }
 }

@mixin source() { ... }@mixin source() { 
  @include typography.style-as('utility-2');
  @include text-shadow;

  color: color.get('text', 'static', 'light', 'primary');
  display: flex;
  align-items: center;
  z-index: 2;
  margin: spacing.get(s3) spacing.get(s4) 0 spacing.get(s4);

  img {
    width: unit.rem(40px);
    height: unit.rem(40px);
    margin-right: spacing.get(s2);
    border-radius: 50%;
    object-fit: cover;
  }
 }

@mixin image-container() { ... }@mixin image-container() { 
  @include mixins.media-container;

  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
 }

@mixin image() { ... }@mixin image() { 
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center center;
 }

@mixin swipe-affordance() { ... }@mixin swipe-affordance() { 
  @include typography.style-as('utility-2', 'strong');
  @include text-shadow;

  color: color.get('text', 'static', 'light', 'primary');
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: spacing.get(s4);

  svg {
    height: unit.rem(20px);
    width: unit.rem(20px);
    margin-left: spacing.get(s1);
    margin-bottom: unit.rem(2px);
  }
 }

@mixin text-shadow() { ... }@mixin text-shadow() { 
  text-shadow: 0 0 #{unit.rem(16px)} #{color.get('static', 'gray1', '900')};
 }

@mixin responsive-swipe-affordance() { ... }@mixin responsive-swipe-affordance() { 
  display: flex;

  @media (pointer: fine) {
    display: none;
  }

  /// Dev-only override for Storybook to force the swipe affordance to be visible for example and testing purposes
  .force-show-swipe & {
    display: flex;
  }
 }

@mixin hidden() { ... }@mixin hidden() { 
  display: none;
 }

@mixin has-source() { ... }@mixin has-source() { 
  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: unit.rem(124px);
    pointer-events: none;
    z-index: 1;

    // TODO: Update these values to use tokens when new token with opacity is created. UXE-8673
    background: linear-gradient(
      to bottom,
      color.get('static', 'gray1', '900a50') 0,
      color.get('static', 'gray1', '900a50') unit.rem(60px),
      transparent unit.rem(124px)
    );
  }
 }

&::before { ... }&::before { content: '';
    position: absolute;
    top: -1 * unit.rem(124px);
    left: 0;
    right: 0;
    height: unit.rem(124px);
    pointer-events: none;
    z-index: 3;

    // TODO: Update these values to use tokens when new token with opacity is created. UXE-8673
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      color.get('static', 'gray1', '900a50') 100%
    ); }

.force-show-swipe & { ... }.force-show-swipe & { display: flex; }

$scrim-fade-height: unit.rem(64px) !default;