.layout-container {

  .pipe {
    --pipe-column-width: 1440px;
    --pipe-edge-offset: max(0px, calc((100vw - var(--pipe-column-width)) / 2));

    position: absolute;
    top: var(--pipe-top, 0);
    height: var(--pipe-height, auto);
    z-index: var(--pipe-z-index, 1);
  }

  .pipe__img {
    display: block;
    height: var(--pipe-height, auto);
    width: auto;
    max-width: none;
  }

  .pipe--left {
    left: var(--pipe-edge-offset);
  }

  .pipe--right {
    right: var(--pipe-edge-offset);
  }

}

@media (max-width: 1400px) {
  .section--pipes {
    display: none;
  }

  .layout-container .section--pipes:has(.pipe--has-mobile) {
    display: block;
    pointer-events: none;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-top: var(--pipe-mobile-spacing-top, 0);
    margin-bottom: var(--pipe-mobile-spacing-bottom, 0);
  }

  .layout-container .pipe--has-mobile .pipe__img {
    display: none;
  }

  .layout-container .pipe--has-mobile {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 80px;
  }

  .layout-container .pipe--has-mobile .pipe__img--mobile {
    display: block;
    width: 100%;
    height: 80px;
    max-width: none;
    object-position: center;
  }

  .layout-container .pipe--has-mobile.pipe--left .pipe__img--mobile {
    object-position: left center;
  }

  .layout-container .pipe--has-mobile.pipe--right .pipe__img--mobile {
    object-position: right center;
  }
}

@media (min-width: 1401px) {
  .layout-container .pipe__img--mobile {
    display: none;
  }
}