/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./components/04-templates/project/detail/detail.css ***!
  \**************************************************************************************************************************************************************************************/
/** ***************************************************************************
 * Templates / Project / Detail
 *************************************************************************** */
body {
  /**
   * Header
   */
  --sm-c-page__header--FontSize: clamp(var(--sm-global--FontSize-paragraph--2xs), 2.43vw, var(--sm-global--FontSize-paragraph--sm));
  --sm-c-page__header--LineHeight: 1.2;
  /**
   * Subtitle
   */
  --sm-c-page__subtitle--MarginBlockStart: 0.77em;
  /**
   * Cover image
   */
  --sm-c-page__cover_image--BorderRadius: 0.7em;
  --sm-c-page__cover_image--MarginBlockStart: 2.57em;
  /**
   * External site button
   */
  --sm-c-page__button--BackgroundColor: var(--sm-c-page--AccentColor);
  --sm-c-page__button--FontSize: clamp(0.875rem, 1.56vw, 1.25rem);
  --sm-c-page__button--MarginBlockStart: clamp(2.965rem, 7.153vw, 6.4375rem);
  /**
   * Next project CTA
   */
  --sm-c-page__next--MarginBlockStart: clamp(2.5rem, 12.78vw, 11.5rem);
}

/**
 * Header
 */
main > header {
  display: grid;
  font-size: var(--sm-c-page__header--FontSize);
  grid-column-gap: inherit;
  grid-column: 1/-1;
  grid-template-columns: inherit;
  line-height: var(--sm-c-page__header--LineHeight);
  text-align: center;
}

@media all and (min-width: 48rem) {
  main > header {
    text-align: initial;
  }
}
/**
 * Title
 */
main > header > h1 {
  margin: 0;
  grid-column: 1/-1;
}

@media all and (min-width: 48rem) {
  main > header > h1 {
    grid-column: 3/-3;
  }
}
/**
 * Subtitle
 */
main > header > p {
  grid-column: 1/-1;
  margin-block: var(--sm-c-page__subtitle--MarginBlockStart) 0;
}

@media all and (min-width: 48rem) {
  main > header > p {
    grid-column: 3/-3;
  }
}
/**
 * Cover image
 */
main > header > img {
  border-radius: var(--sm-c-page__cover_image--BorderRadius);
  grid-column: 1/-1;
  inline-size: 100%;
  margin-block-start: var(--sm-c-page__cover_image--MarginBlockStart);
}

/**
 * External site button
 */
main > header + *,
main > header + .sm-c-button + * {
  margin-block-start: var(--sm-c-page__button--MarginBlockStart);
}

main > header + .sm-c-button + .sm-m-lead > p {
  margin-block-start: 0;
}

main > header + .sm-c-button {
  --sm-c-button--BackgroundColor: var(--sm-c-page__button--BackgroundColor);
  --sm-c-button--BorderColor: var(--sm-c-page__button--BackgroundColor);
  --sm-c-button--Color: currentcolor;
  --sm-c-button--Font: var(--sm-global--Font-label-xl-regular);
  --sm-c-button--hover--BackgroundColor: var(--sm-c-page--BackgroundColor);
  --sm-c-button--hover--Color: currentcolor;
  align-self: start;
  font-size: var(--sm-c-page__button--FontSize);
  grid-column: 1/-1;
  grid-row-end: span 2;
  justify-self: start;
  margin-block-start: var(--sm-c-page__button--MarginBlockStart);
}

@media all and (min-width: 48rem) {
  main > header + .sm-c-button {
    grid-column: 1/span 3;
  }
}
/**
 * Next project CTA
 */
main > .sm-c-next_project {
  grid-column: 1/-1;
  margin-block-start: var(--sm-c-page__next--MarginBlockStart);
}

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