/*!****!*\
  !*** 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/molecules/quotes/quotes.scss ***!
  \****/
/***
 * 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.
 */
/*!****!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/webfonts-loader/index.js!./web/themes/uw/un2_theme/assets/icons/webicons.monochrome.js ***!
  \****/
/*!****!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/webfonts-loader/index.js!./web/themes/uw/un2_theme/assets/icons/webicons.color.js ***!
  \****/
/*
 * NOTE: there are issues using fontawesome's default mixins due to the
 * use of @extends %fa-icon:
 * - we replace it with @include fa-icon & proper font
 * - we manually set the font-weight
 * - this is quite safe, as these mixins are straight-forward
 * - we also add the support to add icons to both ::before & ::after
 */
/*
 * Currently the image uses absolute positioning on larger breakpoints, which
 * ensures the container with the text (un blue) can have a different (shorter)
 * height, which is required for the design.
 *
 * As an edge-case a very large amount of text exceeds the height and un-used
 * space is left above the image. This should rarely be a problem, but worth
 * noting.
 *
 * TODO: look into using floated image to allow for better wrapping in extreme
 * cases: https://css-tricks.com/float-an-element-to-the-bottom-corner/
 * This might prove difficult, but it might be worth a try.
 */
.pattern-quotes--banner {
  /*
   * Set image height per breakpoint
   */
}

.pattern-quotes--banner .pattern-quotes--banner__wrapper {
  position: relative;
}

.pattern-quotes--banner .pattern-quotes--banner__image {
  position: relative;
}

.pattern-quotes--banner .pattern-quotes--banner__image::before {
  display: block;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 50%;
  content: "";
}

[dir] .pattern-quotes--banner .pattern-quotes--banner__image::before {
  background-image: url(/youthaffairs/themes/dist/b21d604b3ec006e2f7e0.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

[dir="ltr"] .pattern-quotes--banner .pattern-quotes--banner__image::before {
  left: 0;
}

[dir="rtl"] .pattern-quotes--banner .pattern-quotes--banner__image::before {
  right: 0;
}

.pattern-quotes--banner .pattern-media-image {
  display: flex;
  justify-content: end;
  align-items: end;
}

.pattern-quotes--banner img {
  width: auto;
}

.pattern-quotes--banner .pattern-quotes--banner__content {
  position: relative;
  color: #fff;
  font-weight: bold;
}

[dir] .pattern-quotes--banner .pattern-quotes--banner__content {
  padding: 2rem 1.5rem;
}

.pattern-quotes--banner .pattern-quotes--banner__content::after {
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
}

[dir] .pattern-quotes--banner .pattern-quotes--banner__content::after {
  background: var(--bs-primary);
}

[dir="ltr"] .pattern-quotes--banner .pattern-quotes--banner__content::after {
  left: 0;
}

[dir="rtl"] .pattern-quotes--banner .pattern-quotes--banner__content::after {
  right: 0;
}

.pattern-quotes--banner .pattern-quotes--banner__quote {
  position: relative;
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  .pattern-quotes--banner .pattern-quotes--banner__quote {
    font-size: 2rem;
  }
}

.pattern-quotes--banner .pattern-quotes--banner__quote::before {
  display: block;
  content: "\f10d";
  color: #fff;
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  font-family: "Font Awesome 6 Free";
}

[dir="ltr"] .pattern-quotes--banner .pattern-quotes--banner__quote::before {
  text-align: right;
}

[dir="rtl"] .pattern-quotes--banner .pattern-quotes--banner__quote::before {
  text-align: left;
}

[dir=rtl] .pattern-quotes--banner .pattern-quotes--banner__quote::before {
  transform: rotate(180deg);
}

.pattern-quotes--banner .pattern-quotes--banner__author {
  font-size: 1.25rem;
}

[dir] .pattern-quotes--banner .pattern-quotes--banner__author {
  margin-block-start: 1.5rem;
  text-align: end;
}

.pattern-quotes--banner .pattern-media-image,
.pattern-quotes--banner img {
  height: 15rem;
}

@media (min-width: 576px) {
  .pattern-quotes--banner .pattern-media-image,
  .pattern-quotes--banner img {
    height: 17rem;
  }
}

@media (min-width: 768px) {
  .pattern-quotes--banner .pattern-media-image,
  .pattern-quotes--banner img {
    height: 19rem;
  }
}

@media (min-width: 992px) {
  .pattern-quotes--banner .pattern-media-image,
  .pattern-quotes--banner img {
    height: 20rem;
  }
}

@media (min-width: 1200px) {
  .pattern-quotes--banner .pattern-media-image,
  .pattern-quotes--banner img {
    height: 21rem;
  }
}

@media (min-width: 1400px) {
  .pattern-quotes--banner .pattern-media-image,
  .pattern-quotes--banner img {
    height: 22rem;
  }
}

@media (min-width: 576px) {
  [dir] .pattern-quotes--banner .pattern-quotes--banner__content {
    padding-inline-start: 3rem;
  }
}

@media (min-width: 992px) {
  [dir] .pattern-quotes--banner .pattern-quotes--banner__quote::before {
    margin-inline-start: -2.5rem;
    margin-block-end: -0.625rem;
  }

  [dir] .pattern-quotes--banner .pattern-quotes--banner__content {
    padding-inline-start: 5rem;
  }
}

@media (min-width: 1200px) {
  .pattern-quotes--banner .pattern-quotes--banner__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 21rem;
  }

  .pattern-quotes--banner .pattern-quotes--banner__image {
    position: absolute;
    bottom: 0;
  }

  [dir="ltr"] .pattern-quotes--banner .pattern-quotes--banner__image {
    right: 0;
  }

  [dir="rtl"] .pattern-quotes--banner .pattern-quotes--banner__image {
    left: 0;
  }

  .pattern-quotes--banner .pattern-quotes--banner__image::before {
    content: none;
  }

  .pattern-quotes--banner .pattern-quotes--banner__content {
    order: 1;
    width: 100%;
  }

  [dir] .pattern-quotes--banner .pattern-quotes--banner__content {
    padding-inline: 7rem 46%;
  }
}

@media (min-width: 1400px) {
  .pattern-quotes--banner .pattern-quotes--banner__wrapper {
    min-height: 21rem;
  }

  [dir] .pattern-quotes--banner .pattern-quotes--banner__content {
    padding-inline-end: 41%;
  }
}

[dir] .pattern-quotes {
  margin-block-end: 0.75rem;
  border-radius: 5px;
}

.pattern-quotes__image {
  z-index: 10;
  width: 210px;
}

[dir] .pattern-quotes__image {
  margin: 0 auto 0.813rem;
}

[dir] .pattern-quotes__image img {
  border-radius: 50%;
}

.pattern-quotes__summary-text {
  display: flex;
  flex-direction: column;
}

[dir] .pattern-quotes__summary-text {
  margin-block-end: 1rem;
}

.pattern-quotes__summary-text::before, .pattern-quotes__summary-text::after {
  content: "";
  color: var(--bs-primary);
  font-weight: 900;
  line-height: 1.3;
  font-family: "Font Awesome 6 Free";
  font-size: calc(1.2625rem + 0.15vw);
}

@media (min-width: 1200px) {
  .pattern-quotes__summary-text::before, .pattern-quotes__summary-text::after {
    font-size: 1.375rem;
  }
}

.pattern-quotes__summary-text::before {
  content: "\f10d";
}

[dir] .pattern-quotes__summary-text::before {
  margin-inline-end: auto;
  margin-block-end: 0.5rem;
}

[dir=rtl] .pattern-quotes__summary-text::before {
  transform: rotateY(180deg);
}

.pattern-quotes__summary-text::after {
  content: "\f10e";
}

[dir] .pattern-quotes__summary-text::after {
  margin-top: auto;
  margin-inline-start: auto;
}

[dir=rtl] .pattern-quotes__summary-text::after {
  transform: rotateY(180deg);
}

[dir] .pattern-quotes__summary-author {
  clear: both;
  text-align: end;
}

[dir] .pattern-quotes--long-text {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

[dir="ltr"] .pattern-quotes--long-text {
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.29);
}

[dir="rtl"] .pattern-quotes--long-text {
  box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.29);
}

[dir] .pattern-quotes--long-text .pattern-quotes__summary-text .text-formatted p:last-child {
  margin-bottom: 0;
}

.pattern-quotes--long-text .pattern-quotes__summary-text::before, .pattern-quotes--long-text .pattern-quotes__summary-text::after {
  display: none;
}

@media (min-width: 576px) {
  [dir] .pattern-quotes--image-short-text .pattern-quotes__summary-author {
    margin-inline-end: 178px;
  }
}

@media (max-width: 575.98px) {
  .pattern-quotes--image-short-text .pattern-quotes__summary-author {
    order: 3;
  }

  [dir] .pattern-quotes--image-short-text .pattern-quotes__summary-author {
    margin-block-start: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .pattern-quotes--image-short-text {
    display: flex;
    flex-direction: column;
  }
}

.pattern-quotes--image-short-text .pattern-quotes__image {
  width: 148px;
  height: 148px;
}

[dir="ltr"] .pattern-quotes--image-short-text .pattern-quotes__image {
  float: right;
}

[dir="rtl"] .pattern-quotes--image-short-text .pattern-quotes__image {
  float: left;
}

@media (min-width: 576px) {
  [dir] .pattern-quotes--image-short-text .pattern-quotes__image {
    margin-inline-start: 2rem;
  }
}

@media (max-width: 575.98px) {
  .pattern-quotes--image-short-text .pattern-quotes__image {
    order: 2;
  }

  [dir] .pattern-quotes--image-short-text .pattern-quotes__image {
    margin: 1rem 0 0;
    margin-inline-start: auto;
  }
}

.pattern-quotes--image-short-text, .pattern-quotes--short-text {
  font-size: calc(1.2625rem + 0.15vw);
}

@media (min-width: 1200px) {
  .pattern-quotes--image-short-text, .pattern-quotes--short-text {
    font-size: 1.375rem;
  }
}