@mixin base-styles() { ... }@mixin base-styles() { 
  margin-left: auto;
  margin-right: auto;
  max-width: settings.$max-width-small;
  min-width: settings.$min-width;
  position: relative;
  display: block;
  height: settings.$height;
  overflow: hidden;

  &:focus {
    box-shadow: 0 0 0 settings.$focus-border settings.$focus-border-color;
    outline: none;
  }

  @include media.query(md) {
    max-width: settings.$max-width-medium;
  }

  @include media.query(min-lg) {
    max-width: settings.$max-width-large;
  }
 }

@mixin content-align-start() { ... }@mixin content-align-start() { 
  @include kib-grid.container-aligned-center;
  @include kib-grid.container-vertical-aligned-top;
 }

@mixin content-align-center() { ... }@mixin content-align-center() { 
  @include kib-grid.container-aligned-center;
 }

@mixin wrapper() { ... }@mixin wrapper() { 
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: settings.$wrapper-height;

  @include media.query(min-md) {
    height: 100%;
    top: 0;
  }
 }

@mixin wrapper-dynamic-color() { ... }@mixin wrapper-dynamic-color() { 
  position: static;
  flex: 1;

  @include media.query(min-md) {
    flex: 1 0 settings.$fixed-size-medium;
  }

  @include media.query(min-lg) {
    flex: 1 0 settings.$fixed-size-large;
  }
 }

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

@mixin image-dynamic-color() { ... }@mixin image-dynamic-color() { 
  height: settings.$fixed-size-small;

  @include media.query(min-md) {
    height: 100%;
  }
 }

@mixin header-styles() { ... }@mixin header-styles() { 
  margin: 0;
  padding: 0;
 }

@mixin subheader-styles() { ... }@mixin subheader-styles() { 
  margin-top: settings.$header-margin;
  margin-bottom: 0;
 }

@mixin text-container() { ... }@mixin text-container() { 
  padding-left: calc(#{settings.$text-margin} * 1.5);
  padding-right: calc(#{settings.$text-margin} * 1.5);
  width: 100%;

  @include media.query(min-md) {
    padding: 0;
    max-height: 100%;
    width: settings.$text-container-width;
  }

  @include media.query(min-lg) {
    width: settings.$text-container-width-large;
  }
 }

@mixin text-container-dynamic-color() { ... }@mixin text-container-dynamic-color() { 
  @include media.query(min-md) {
    width: settings.$text-container-width-color-block;
  }

  @include media.query(min-lg) {
    width: settings.$text-container-width-large;
  }
 }

@mixin text-alignment() { ... }@mixin text-alignment() { 
  @if $centered {
    text-align: center;
  } @else {
    text-align: left;
  }

  @include media.query(min-md) {
    @if $centered {
      margin-left: 0;
    } @else {
      margin-left: settings.$text-left-margin-medium;
    }
  }

  @include media.query(min-lg) {
    @if $centered == false {
      margin-left: settings.$text-left-margin-large;
    }
  }
 }

@mixin actions() { ... }@mixin actions() { 
  margin-top: settings.$text-margin;
 }

@mixin actions-dynamic-color() { ... }@mixin actions-dynamic-color() { 
  @include media.query(max-sm) {
    margin-bottom: calc(#{settings.$text-margin} * 1.5);
  }
 }

@mixin variant-dynamic-color() { ... }@mixin variant-dynamic-color() { 
  display: flex;
  flex-direction: column;

  @include media.query(min-md) {
    flex-direction: row-reverse;
  }
 }

@mixin font-styles-x($parent) { ... }@mixin font-styles-x($parent) { 
  @each $i in map.keys(presets.$styles) {
    &--style-#{$i} {
      #{$parent}__header {
        @include typography.style-as(map.get(presets.$styles, $i, '$header'));

        @if map.get(presets.$styles, $i, 'sm') {
          @include media.query(max-md) {
            @include typography.style-as(map.get(presets.$styles, $i, 'sm', '$header'));
          }
        }

        @if map.get(presets.$styles, $i, 'md') {
          @include media.query(min-md) {
            @include typography.style-as(map.get(presets.$styles, $i, 'md', '$header'));
          }
        }

        @if map.get(presets.$styles, $i, 'lg') {
          @include media.query(min-lg) {
            @include typography.style-as(map.get(presets.$styles, $i, 'lg', '$header'));
          }
        }
      }

      #{$parent}__subheader {
        @include typography.style-as(map.get(presets.$styles, $i, '$subheader'));
        @if $i == 2 {
          display: none;
        }

        @if map.get(presets.$styles, $i, 'sm') {
          @include media.query(max-md) {
            @include typography.style-as(map.get(presets.$styles, $i, 'sm', '$subheader'));
          }
        }

        @if map.get(presets.$styles, $i, 'md') {
          @include media.query(min-md) {
            @include typography.style-as(map.get(presets.$styles, $i, 'md', '$subheader'));
          }
        }

        @if map.get(presets.$styles, $i, 'lg') {
          @include media.query(min-lg) {
            @include typography.style-as(map.get(presets.$styles, $i, 'lg', '$subheader'));
          }
        }
      }
    }
  }
 }

$height: unit.rem(296px) !default;

$min-width: unit.rem(300px) !default;

$max-width-small: unit.rem(648px) !default;

$max-width-medium: unit.rem(1040px) !default;

$max-width-large: unit.rem(1440px) !default;

$wrapper-height: unit.rem(164px) !default;

$text-container-width-color-block: unit.rem(266px) !default;

$text-container-width: unit.rem(316px) !default;

$text-container-width-large: unit.rem(440px) !default;

$text-left-margin-large: unit.rem(104px) !default;

$text-left-margin-medium: unit.rem(88px) !default;

$text-margin: spacing.get('s4') !default;

$header-margin: spacing.get('s1') !default;

$subheader-margin: spacing.get('s2') !default;

$focus-border: unit.rem(2px);

$focus-border-color: color.get('action', 'cta', 'primary', 'primary');

$fixed-size-large: unit.rem(600px) !default;

$fixed-size-medium: unit.rem(380px) !default;

$fixed-size-small: unit.rem(146px) !default;