@charset "UTF-8";
/**
 * Bootstrap 5.3 – Variabili SCSS di base
 * @see https://getbootstrap.com/docs/5.3/customize/sass/
 */
/* ----------------------------------------------------------
 * SPACING
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * COLOR SYSTEM
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BODY
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * TYPOGRAPHY
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * LINK
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BORDER 
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * ACCORDION
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * TABS
 * ---------------------------------------------------------- */
/* ----------------------------------------------------------
 * BUTTONS
 * ---------------------------------------------------------- */
.block__hero-project .media-mask-container {
  background-color: var(--mask-color);
  position: relative;
  height: 200vh;
  z-index: 1;
}
.block__hero-project .media-mask-container .mask-circle {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0px;
  clip-path: circle(min(40vw, 40vh));
}
.block__hero-project .media-mask-container .mask-circle .wrap-image,
.block__hero-project .media-mask-container .mask-circle .wrap-video {
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.block__hero-project .media-mask-container .mask-circle .wrap-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}