section.cad-project {
  display: grid;
  overflow: visible;
  grid-template-columns: 1fr 50%;
  gap: 30px;
  justify-content: center;
  align-items: center;
  @media only screen and (orientation: portrait), (max-width: 800px) {
    display: flex;
	flex-direction: column;
    justify-content: center;
  }
}

.cad-project .description-container {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 15px 0;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: 100%;
	padding: 0;
  }
}

.cad-project .description-container h2 {
  margin-top: calc(var(--other-fonts-size) * var(--text-line-height));
  margin-bottom: 30px;
  text-wrap: balance;
  text-align: center;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	margin-bottom: 15px;
	hyphens: auto;
  }
}

.cad-project .description-container p {
  color: var(--light-text-color);
  @media only screen and (orientation: portrait), (max-width: 800px) {
	hyphens: auto;
  }
}

.cad-project .viewer-container {
  max-height: 80vh;
  aspect-ratio: 4 / 3;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	width: 100%;
	aspect-ratio: var(--viewer-ratio);
  }
}

.cad-project .viewer {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  --fade-size: 10px;
  mask-image: linear-gradient(to top,    transparent, black var(--fade-size)),
              linear-gradient(to bottom, transparent, black var(--fade-size)),
              linear-gradient(to left,   transparent, black var(--fade-size)),
              linear-gradient(to right,  transparent, black var(--fade-size));
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to top,    transparent, black var(--fade-size)),
                      linear-gradient(to bottom, transparent, black var(--fade-size)),
                      linear-gradient(to left,   transparent, black var(--fade-size)),
                      linear-gradient(to right,  transparent, black var(--fade-size));
  -webkit-mask-composite: destination-in;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  position: relative;
}

.cad-project .viewer .scrolling-mask {
  display: none;
  width: var(--touch-devices-button-height);
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  @media only screen and (orientation: portrait), (max-width: 800px) {
	display: flex;
  }
}

.cad-project .viewer .scrolling-mask.left {
  left: 0;
}

.cad-project .viewer .scrolling-mask.right {
  right: 0;
}

.cad-project .viewer model-viewer {
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  z-index: 0;
}

.cad-project .hotspot {
  width: 15px;
  height: 15px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background-color: var(--transparent-light-blue);
  position: relative;
  cursor: grab;
  transition: all 0.15s;
}

.cad-project .hotspot:not([data-visible]) {
  background-color: var(--transparent-light-blue);
  border: 2px solid var(--white);
  pointer-events: none;
  transition: all 0.15s;
}

.cad-project .hotspot > * {
  opacity: 1;
  transform: translateY(-50%);
  transition: all 0.15s 0.30s;
}

.cad-project .hotspot:not([data-visible]) > * {
  opacity: 0;
  transform: translateY(calc(-50% + 2px));
  pointer-events: none;
  transition: all 0.15s;
}

.cad-project .hotspot-annotation {
  display: block;
  width: 150px;
  padding: 10px 15px;
  gap: 5px;
  border-radius: 5px;
  background-color: var(--tooltip-color);
  /*backdrop-filter: blur(3px);*/
  box-shadow: 3px -4px 5px -2px var(--shadow-color),
              3px 4px 5px -2px var(--shadow-color);
  position: absolute;
  top: 50%;
  left: calc(5px + var(--tooltip-arrow-size) + 100%);
  pointer-events: none;
}

.cad-project .hotspot-annotation::after {
  content: "";
  width: 0;
  height: 0;
  border-top: var(--tooltip-arrow-size) solid transparent;
  border-bottom: var(--tooltip-arrow-size) solid transparent;
  border-right: var(--tooltip-arrow-size) solid var(--tooltip-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
}

.cad-project .hotspot-annotation p {
  line-height: 1.2;
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  color: var(--white);
  text-shadow: none;
}





/*TESTS INTEGRATION DIMENSIONS MODELES 3D*/
.cad-project .hotspot-annotation,
.cad-project .dimension {
  display: block;
  width: 150px;
  padding: 10px 15px;
  gap: 5px;
  border-radius: 5px;
  background-color: var(--tooltip-color);
  /*backdrop-filter: blur(3px);*/
  box-shadow: 3px -4px 5px -2px var(--shadow-color),
              3px 4px 5px -2px var(--shadow-color);
  position: absolute;
  top: 50%;
  left: calc(5px + var(--tooltip-arrow-size) + 100%);
  pointer-events: none;
}

.cad-project .dimension {
  width: max-content !important;
  height: max-content;
  --min-hotspot-opacity: 0;
  line-height: 1.2;
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  color: var(--white);
  text-shadow: none;
  transform: translate3d(-50%, -50%, 0);
}

.dimensionLineContainer {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.dimensionLine {
  stroke: var(--transparent-light-blue);
  stroke-width: 2;
  stroke-dasharray: 2;
}

.hide {
  opacity: 0;
}