/* Keep desktop feature diagrams aligned with the full content column. */
.page-g3 .control-modes {
  background: #dcdcdc;
}
.page-g3 .control-modes__diagram {
  position: relative;
  overflow: hidden;
  aspect-ratio: 680 / 140;
}
.page-g3 .control-modes__diagram img {
  position: absolute;
  width: 235.294%;
  max-width: none;
  height: auto;
  left: -67.794%;
  top: 0;
  transform: translateY(-47.5%);
}
.page-g3 .control-modes__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  padding: 1rem 5% 2.4rem 7.8%;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #222;
}
.page-g3 .control-modes__labels strong {
  display: block;
  color: #007ead;
  font-size: 1.8rem;
  line-height: 1.35;
}
.page-g3 .control-modes__labels p {
  margin: 0.8rem 0 0;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 990px) {
  .page-g3 .content-container #content-1 .inner .flex-right .card-2-1 .card-2-img-wrapper,
  .page-g3 .content-container #content-1 .inner .flex-right .card-3 .module-wrapper,
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-2-wrapper {
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2-1 .card-2-img-wrapper > img.mo-only,
  .page-g3 .content-container #content-1 .inner .flex-right .card-3 .module-wrapper > img.mo-only,
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-2-wrapper > img.mo-only {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 12px;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group .img-left,
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group .img-right {
    width: 100%;
    height: auto;
    min-width: 0;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group .img-left > img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .page-g3 > .grid-download {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .page-g3 > .grid-download .grid-title {
    font-size: 2.8rem;
    margin-bottom: 2.4rem;
  }
  .page-g3 > .grid-download .videos-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media screen and (min-width: 991px) {
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group {
    gap: 2.4rem;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group .img-left {
    flex: 1;
    min-width: 0;
    height: auto;
    aspect-ratio: 27.216 / 19.936;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-2 .img-group .img-right {
    flex-shrink: 0;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-3 .module-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 56.5 / 16.2;
    transform: none;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-3 .module-wrapper .text-1 {
    left: 64.6%;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-3 .module-wrapper .text-2 {
    left: 21.24%;
    top: 22.84%;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-4 .ways-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 55.7 / 14.3;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-4 .ways-wrapper .ways-img {
    height: 100%;
    object-fit: contain;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-5 .house-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 55.2 / 19.5;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-1-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 54.9 / 13;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-1-wrapper .img-1 {
    width: 102%;
    height: auto;
    aspect-ratio: 56 / 44.12;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-2-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 55.3 / 19.2;
  }
  .page-g3 .content-container #content-1 .inner .flex-right .card-6 .img-2-wrapper .img-2 {
    width: 235.08%;
    height: auto;
    aspect-ratio: 1;
    left: -67.81%;
    top: -321.35%;
  }
}