@mixin base-styles() { ... }@mixin base-styles() { 
  margin-left: auto;
  margin-right: auto;
  max-width: settings.$max-width-small;
  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 tall-styles($parent) { ... }@mixin tall-styles($parent) { 
  height: settings.$tall-height;
 }

@mixin short-styles($parent) { ... }@mixin short-styles($parent) { 
  height: settings.$short-height-small;

  @include media.query(min-md) {
    height: settings.$short-height;
  }
 }

@mixin wrapper($parent) { ... }@mixin wrapper($parent) { 
  @include kib-grid.container-base;
  @include kib-grid.container-vertical-aligned-center;

  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
 }

@mixin wrapper-align-start() { ... }@mixin wrapper-align-start() { 
  @include kib-grid.container-aligned-left;
 }

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

@mixin wrapper-align-end() { ... }@mixin wrapper-align-end() { 
  // Align left when < small
  @include kib-grid.container-aligned-left;

  @include media.query(min-md) {
    @include kib-grid.container-aligned-right;
  }
 }

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

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

  #{$parent}--light & {
    color: settings.$header-color-light-bg;
  }

  #{$parent}--dark & {
    color: settings.$header-color-dark-bg;
  }
 }

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

  #{$parent}--light & {
    color: settings.$subheader-color-light-bg;
  }

  #{$parent}--dark & {
    color: settings.$subheader-color-dark-bg;
  }
 }

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

@mixin text-container($parent) { ... }@mixin text-container($parent) { 
  @include kib-grid.item-base;

  max-height: 100%;
  width: settings.$safe-area-width-small;

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

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

@mixin text-container-align-start() { ... }@mixin text-container-align-start() { 
  margin-left: settings.$safe-area-margin-small;

  @include media.query(min-md) {
    margin-left: settings.$safe-area-margin-horizontal;
  }
 }

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

  text-align: center;
 }

@mixin text-container-align-end() { ... }@mixin text-container-align-end() { 
  margin-left: settings.$safe-area-margin-small;

  @include media.query(min-md) {
    margin-right: settings.$safe-area-margin-horizontal;
  }
 }

@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'),
          map.get(presets.$styles, $i, '$headerAlternate')
        );

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

      #{$parent}__subheader {
        @include typography.style-as(
          map.get(presets.$styles, $i, '$subheader'),
          map.get(presets.$styles, $i, '$subheaderAlternate')
        );

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

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

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

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

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

$safe-area-width-small: unit.rem(208px) !default;

$safe-area-width-medium: unit.rem(316px) !default;

$safe-area-width-large: unit.rem(440px) !default;

$safe-area-margin-horizontal: unit.rem(52px) !default;

$safe-area-margin-small: spacing.get('s4') !default;

$tall-height: unit.rem(400px) !default;

$short-height: unit.rem(168px) !default;

$short-height-small: unit.rem(128px) !default;

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

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

$header-color-light-bg: kib-core.theme-get('next', 'neutral', 800) !default;

$subheader-color-light-bg: kib-core.theme-get('next', 'neutral', 600) !default;

$header-color-dark-bg: kib-core.theme-get('next', 'neutral', 50) !default;

$subheader-color-dark-bg: kib-core.theme-get('next', 'neutral', 100) !default;

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

$focus-border-color: kib-core.theme-get('next', 'brand');