/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./components/03-digital/04-templates/03-article/article.scss ***!
  \***********************************************************************************************************************************************************************************************/
/** ***************************************************************************
 * Digital / Templates / Publication article
 *************************************************************************** */
/** ***************************************************************************
 * Conchiglia SASS utilities
 *************************************************************************** */
/* Function for converting a px based font-size to rem. */
/* This is useful to use variables in JS files */
:export {
  xs: 0;
  sm: 37.5rem;
  md: 48rem;
  lg: 64rem;
  xl: 80rem;
  xxl: 90rem;
  xxxl: 120rem;
}

body {
  /**
   * Main content
   */
  --cn-c-page__main--m-preview--MaxBlockSize: 170vh;
  --cn-c-page__main--m-preview--after--BlockSize: 17.45em;
  /**
   * Header
   */
  --cn-c-page__header--MarginBlockEnd: 2.5rem;
  --cn-c-page__header--GridColumn: 2 / -2;
  /**
   * Section
   */
  --cn-c-page__section-title--FontSize: 1.08em;
  --cn-c-page__section-title--nested--FontSize: 1em;
  --cn-c-page__section-title--FontWeight: var(--cn-global--FontWeight-semibold);
  --cn-c-page__section-title--MarginBlockEnd: .39em;
  /**
   * Picture
   */
  --cn-c-page__picture--FontSize: 1rem;
  --cn-c-page__picture--ShadowInlineSize: 0;
  --cn-c-page__picture--m-horizontal--GridColumn: var(--cn-c-page__main--GridColumn);
  --cn-c-page__picture--m-vertical--GridColumn: var(--cn-c-page__main--GridColumn);
  --cn-c-page__section__picture--m-horizontal--GridColumn: 1 / -1;
  --cn-c-page__section__picture--m-vertical--GridColumn: 1 / -1;
  /**
   * Simple picture
   */
  --cn-c-page__simple_picture--m-horizontal--AspectRatio: 17/11;
  --cn-c-page__simple_picture--m-vertical--AspectRatio: 13/17;
  /**
   * Figure
   */
  --cn-c-page__figure--m-horizontal--AspectRatio: var(--cn-c-page__simple_picture--m-horizontal--AspectRatio);
  --cn-c-page__figure--m-vertical--AspectRatio: var(--cn-c-page__simple_picture--m-vertical--AspectRatio);
  /**
   * Product CTA
   */
  --cn-c-page__productcta--FontSize: 1rem;
  /**
   * Banner
   */
  --cn-c-page__banner--BorderColor: var(--cn-global--palette-black--30);
  --cn-c-page__banner--FontSize: max(0.54em, 0.875rem);
  --cn-c-page__banner--ContentMaxInlineSize: calc(
    6 * var(--cn-c-page--column-width)
    + 5 * var(--cn-global--content-grid--guttersize)
  );
  /** Medium: 768px */
}
@media all and (min-width: 48rem) {
  body {
    --cn-c-page__header--GridColumn: 3 / -3;
    --cn-c-page__picture--m-horizontal--GridColumn: 3 / -3;
    --cn-c-page__picture--m-vertical--GridColumn: 6 / -6;
    --cn-c-page__section__picture--m-horizontal--GridColumn: 2 / -2;
    --cn-c-page__section__picture--m-vertical--GridColumn: 5 / -5;
  }
}

/**
 * Main content
 */
main.cn-m-preview {
  box-sizing: content-box;
  max-block-size: var(--cn-c-page__main--m-preview--MaxBlockSize);
  overflow-y: hidden;
  padding-block-end: 0;
  pointer-events: none;
  position: relative;
}
main.cn-m-preview::after {
  background-image: linear-gradient(180deg, transparent 0, var(--cn-c-page--BackgroundColor) 92%);
  block-size: var(--cn-c-page__main--m-preview--after--BlockSize);
  content: "";
  display: block;
  inset-block-end: 0;
  inset-inline: 0;
  position: absolute;
  z-index: 2;
}

/**
 * Header
 */
main > .cn-c-article_header {
  grid-column: var(--cn-c-page__header--GridColumn);
  margin-block-end: var(--cn-c-page__header--MarginBlockEnd);
}

/**
 * Section
 * 1: images take precedence
 */
main .cn-c-section {
  --cn-c-section__title--MarginBlockEnd: var(--cn-c-page__section-title--MarginBlockEnd);
  font-size: var(--cn-c-page__main--FontSize);
}

main > .cn-c-section {
  --cn-c-section__title--FontSize: var(--cn-c-page__section-title--FontSize);
  --cn-c-section__title--FontWeight: var(--cn-c-page__section-title--FontWeight);
}

main > .cn-c-section .cn-c-section {
  --cn-c-section__title--FontSize: var(--cn-c-page__section-title--nested--FontSize);
}

/**
 * Picture
 * 1: simulate margin collapse
 */
main > :is(.cn-c-picture, .cn-c-figure),
main :is(.cn-c-section, .cn-c-crag) > :is(.cn-c-picture, .cn-c-figure),
main .cn-c-picture_pair > :is(.cn-c-picture, .cn-c-figure) {
  font-size: var(--cn-c-page__picture--FontSize);
}

main > :is(.cn-c-picture, .cn-c-figure).cn-m-horizontal {
  grid-column: var(--cn-c-page__picture--m-horizontal--GridColumn);
}

main :is(.cn-c-section, .cn-c-crag) > :is(.cn-c-picture, .cn-c-figure).cn-m-horizontal {
  grid-column: var(--cn-c-page__section__picture--m-horizontal--GridColumn);
}

main > :is(.cn-c-picture, .cn-c-figure).cn-m-vertical {
  grid-column: var(--cn-c-page__picture--m-vertical--GridColumn);
}

main :is(.cn-c-section, .cn-c-crag) > :is(.cn-c-picture, .cn-c-figure).cn-m-vertical {
  grid-column: var(--cn-c-page__section__picture--m-vertical--GridColumn);
}

/**
 * Simple picture
 */
main .cn-c-picture.cn-m-horizontal {
  --cn-c-picture__image--AspectRatio: var(--cn-c-page__simple_picture--m-horizontal--AspectRatio);
}

main .cn-c-picture.cn-m-vertical {
  --cn-c-picture__image--AspectRatio: var(--cn-c-page__simple_picture--m-vertical--AspectRatio);
}

/**
 * Figure
 */
main .cn-c-figure.cn-m-horizontal {
  --cn-c-figure__picture--AspectRatio: var(--cn-c-page__figure--m-horizontal--AspectRatio);
}

main .cn-c-figure.cn-m-vertical {
  --cn-c-figure__picture--AspectRatio: var(--cn-c-page__figure--m-vertical--AspectRatio);
}

/**
 * Picture pair
 */
main .cn-c-section > .cn-c-picture_pair {
  grid-column: 1/-1;
}

/**
 * Video player
 */
/**
 * Product CTA
 */
main > .cn-c-product_cta {
  font-size: var(--cn-c-page__productcta--FontSize);
}

/**
 * Banner
 */
main > .cn-c-banner {
  --cn-c-banner--BorderColor: var(--cn-c-page__banner--BorderColor);
  --cn-c-banner__content--MaxInlineSize: var(--cn-c-page__banner--ContentMaxInlineSize);
  font-size: var(--cn-c-page__banner--FontSize);
}

/*# sourceMappingURL=article.css.map*/