<div class="musik-der-gegenwart-1970 posterContainer" data-original-width="1200" data-original-height="850">

  <div class="layout">
    <div class="topPart">
      <div class="pipesContainer">
        <div class="pipe pipe-1">&nbsp;</div>
        <div class="pipe pipe-2">&nbsp;</div>
        <div class="pipe pipe-3">&nbsp;</div>
        <div class="pipe pipe-4">&nbsp;</div>
        <div class="pipe pipe-5">&nbsp;</div>
        <div class="pipe pipe-6">&nbsp;</div>
        <div class="pipe pipe-7">&nbsp;</div>
        <div class="pipe pipe-8">&nbsp;</div>
      </div>
    </div>
    <div class="bottomPart">
      <div class="textGrid">

        <div class="block-1">
          <div>
            Haus des Rundfunks<br />Großer Sendesaal<br />Masurenallee 8-14<br />Mittwoch<br />14. Januar 70, 20 Uhr
          </div>
          <div>
            Radio-Symphonie-Orchester Berlin
          </div>
        </div>
        <div class="block-2">
          <div>
            Leitung:<br />Friedrich Cerha<br />Solist:<br />Mark Lubotzky,<br />Violine
          </div>
          <div>
            Bojidar Dimov:<br />Kontinuum II
          </div>
          <div>
            Alfred Schnittke:<br />Violinkonzert<br />Gerald Humel:<br />Concerto
          </div>
          <div>
            Friedrich Cerha<br />Spiegel III<br />Bruno Maderna:<br />Quadrivium
          </div>
          <div>
            Eintrittskarten<br />DM 1,50, 3,-,5,-<br />bei den Theaterkassen
          </div>
          <div>
            beim SFB<br />montags bis freitags<br />10 bis 15 Uhr<br />telefon. Bestellungen<br />sind nicht möglich
          </div>

        </div>
        <div class="block-3">SFB<span>&nbsp;</span>WDR</div>
        <div class="block-4">MUSIK DER GEGENWART</div>

      </div>
    </div>

  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

$helvetica: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";

.musik-der-gegenwart-1970 {
  &.posterContainer {
    width: 1200px;
    height: 850px;
    margin-top: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
      rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transform-origin: top;

    .layout {
      display: flex;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      flex-direction: column;
      //background-image: url(./../images/samples/musik-der-gegenwart-1970.jpg);
      background-size: contain;
      background-repeat: no-repeat;

      .topPart {
        border: 8px solid #000;
        height: 80%;
        overflow: hidden;

        .pipesContainer {
          display: flex;
          overflow: hidden;
          width: 1400px;
          height: 1400px;
          position: relative;
          align-items: flex-end;
          transform: rotate(41deg) translateX(-255px) translateY(-240px);

          .pipe {
            display: inline-block;
            background: #be2201;
            box-sizing: border-box;
            height: 700px;
            width: 171px;
            border: 8px solid #000;
            margin-top: 200px;
            font-size: 0;
            z-index: 10;

            &::after {
              display: block;
              content: "";
              width: 171px;
              height: 171px;
              border-radius: 50%;
              background: #000;
              position: relative;
              top: -85px;
              left: -8px;
            }

            &.pipe-1 {
              margin-left: 10px;
              height: 562px;
              z-index: 11;
            }

            &.pipe-2 {
              height: 390px;
            }

            &.pipe-3 {
              height: 390px;
            }

            &.pipe-4 {
              height: 984px;
            }

            &.pipe-5 {
              height: 810px;
              z-index: 9;
            }

            &.pipe-6 {
              height: 1263px;
            }

            &.pipe-7 {
              height: 950px;
              z-index: 9;
            }

            &.pipe-2,
            &.pipe-3,
            &.pipe-4,
            &.pipe-5,
            &.pipe-6,
            &.pipe-7 {
              margin-left: -12px;
            }

            &.pipe-8 {
              position: absolute;
              left: 564px;
              bottom: 0;
              height: 600px;
            }
          }
        }
      }
    }

    .bottomPart {
      height: 17%;
      margin-top: 3%;
      font-family: $helvetica;
      text-align: left;

      .textGrid {
        display: grid;
        width: 100%;
        grid-template-columns: 34% auto;
        font-size: 14.5px;
        font-weight: 500;

        .block-1 {
          display: grid;
          grid-template-columns: 38% auto;
        }

        .block-2 {
          display: grid;
          grid-template-columns: 15% 14% 16% 15% 21% auto;
        }

        .block-3 {
          span {
            display: inline-block;
            margin: 0 2px;
            height: 46px;
            width: 4px;
            background-color: #000;
            vertical-align: sub;
          }
        }

        .block-3,
        .block-4 {
          font-size: 62px;
          font-weight: 600;
        }
      }
    }
  }
}

const customThrottle = (callback, limit) => {
  let wait = false;
  return () => {
    if (!wait) {
      callback.call();
      wait = true;
      setTimeout(() => {
        wait = false;
      }, limit);
    }
  };
};

const scaleBasedOnViewport = () => {
  const mainElement = document.querySelectorAll(".posterContainer")[0];
  const originalWidth = mainElement.dataset.originalWidth;
  const viewportWidth = Math.max(
    document.documentElement.clientWidth || 0,
    window.innerWidth || 0
  );

  // we "pretend" that the viewport is 40 pixels smaller to have some
  // margins around the poster
  const derivedViewportWidth = viewportWidth - 40;

  if (derivedViewportWidth < originalWidth) {
    const scaleFactor = derivedViewportWidth / originalWidth;
    mainElement.style.transform = `scale(${scaleFactor})`;
  }
};

const throttledScaleBasedOnViewport = customThrottle(scaleBasedOnViewport, 100);

document.addEventListener("DOMContentLoaded", scaleBasedOnViewport);
window.addEventListener("resize", throttledScaleBasedOnViewport);