/*!***!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./web/profiles/uw/uw_profile/modules/uw_theme_components/patterns/organism/banner/banner.scss ***!
  \***/
/**
 * IMPORTANT:
 * - paddings are different than what is found on UNSG
 * - these paddings were discussed with DGC, but have not been updated
 * - please leave paddings as-is
 */
/***
 * Colors
 ***/
/**
 * Typography
 **/
/**
 * Global elements
 **/
/*
 * Sizing/Spacing
 */
/**
 * Forms
 */
/*
 * Bootstrap
 */
/
 * Mappings
 ****/
/*
 * IMPORTANT:
 *   - This file should *only contain* variables not considered UN style guide *
 */
/**
  Help theming for rtl languages.
*/
/*
 * This handles indentation for the depth of child levels for accordion
 * TODO: improve this implementation, overly complex due to previous design
 */
/*
 * Adds color & text-shadow-based outline to type.
 *
 * @param {color} $color - Color of the marker.
 * @param {color} $border-color - Color for the outline, or border.
 * @param {percent} $border-alpha - Value used in sass:color.scale().
 */
/*
 * Encapsulates the styles for the WYSIWYG editor.
 *
 * We use a mixin in order to be able to reuse these rules inside the
 * CKEditor5 stylesheet to provide the same styles for the editor content.
 * @see un2_theme/scss/admin/_ckeditor5.scss.
 * @see un2_theme/scss/components/_wysiwyg.scss.
 */
/**
 * IMPORTANT:
 * - paddings are different than what is found on UNSG
 * - these paddings were discussed with DGC, but have not been updated
 * - please leave paddings as-is
 */
/*
 * previously max-height was being used to allow the featured banner to grow
 * naturally. the issue with this is that it affects scrolling, for scroll to
 * be applied both height/max-height must be of equal value.
 * although perhaps not necessary, keeping max-height here to avoid breakage.
 */
.uw-banner:not([data-uw-variant=simple]) {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

[dir] .uw-banner:not([data-uw-variant=simple]) {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__media,
.uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll {
  flex: 0 0 auto;
  width: 100%;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__media,
.uw-banner:not([data-uw-variant=simple]) .uw-banner__content {
  height: 100%;
  max-height: 100%;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll {
  --bs-gutter-x: 2rem;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  height: 16rem;
  max-height: 16rem;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
  padding-block: 1rem;
  padding-block-end: 0;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll header {
  display: flex;
  flex-direction: column;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll:not([data-uw-variant=campaign])::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3rem;
  pointer-events: none;
  content: "";
}

[dir="ltr"] .uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll:not([data-uw-variant=campaign])::after {
  left: 0;
}

[dir="rtl"] .uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll:not([data-uw-variant=campaign])::after {
  right: 0;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__content {
  overflow-y: hidden;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__content {
  padding-block-end: 2rem;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__media {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  overflow-y: hidden;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__media {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__media div:not([class^=mejs]) {
  height: 100%;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__title .pattern-headline {
  margin-block-start: 0;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__meta {
  font-size: 1.125rem;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__meta {
  padding-block-end: 0.5rem;
}

.uw-banner:not([data-uw-variant=simple]) .uw-banner__link {
  position: absolute;
  bottom: 0;
  z-index: 11;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__link {
  padding-inline: 1rem;
}

[dir="ltr"] .uw-banner:not([data-uw-variant=simple]) .uw-banner__link {
  right: 0;
}

[dir="rtl"] .uw-banner:not([data-uw-variant=simple]) .uw-banner__link {
  left: 0;
}

[dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__link .btn-secondary {
  margin-block: 0.5rem 1rem;
}

@media (min-width: 576px) {
  .uw-banner:not([data-uw-variant=simple]) .uw-banner__text {
    font-size: 1.125rem;
  }
}

@media (min-width: 992px) {
  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] {
    aspect-ratio: 2.6665/1;
  }

  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-banner__content-scroll {
    flex: 0 0 auto;
    width: 33.33333333%;
    height: 100%;
    max-height: 100%;
  }

  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-banner__media {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default][data-uw-content-position=right] .uw-banner__content-scroll {
    order: 2;
  }

  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default][data-uw-content-position=right] .uw-banner__media {
    order: 1;
  }

  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-media-video iframe,
  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-media-video .mejs__video,
  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-media-video .mejs__layers > div,
  .uw-banner:not([data-uw-variant=simple])[data-uw-variant=default] .uw-media-video video {
    aspect-ratio: unset;
    width: 100% !important;
    height: 100% !important;
  }
}

@media (min-width: 1200px) {
  .uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll {
    --bs-gutter-x: 3rem;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
  }

  [dir] .uw-banner:not([data-uw-variant=simple]) .uw-banner__content-scroll {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
    padding-block: 2rem;
    padding-block-end: 0;
  }
}