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

    <div class="layout">
        <div class="topPart">
            <div class="textGrid">
                <div class="block-1">SFB<span>&nbsp;</span>WDR</div>
                <div class="block-2">MUSIK DER GEGENWART</div>
            </div>

            <div class="smallTextGrid">
                <div>
                    25 Januar 1980<br />
                    20 Uhr<br />
                    Sender Freies Berlin<br />
                    Großer Sendesaal<br />
                    Masurenallee 8-14
                </div>

                <div>
                    David Levine, Klavier<br />
                    Radio-Simphonie-<br />
                    Orchester Berlin<br />
                    Leitung:<br />
                    Christopher Keene
                </div>

                <div>
                    Hans-Jürgen<br />
                    von Bose:<br />
                    <br />
                    Travesties in a sad<br />
                    Landscape (DE)
                </div>

                <div>
                    Wolfgang<br />
                    von Schweinitz:<br />
                    Konzert für<br />
                    Klavier u. Orchester<br />
                    (UA d. Neufassung)
                </div>

                <div>
                    Detlev<br />
                    Müller-Siemens:<br />
                    <br />
                    Bläserquintett
                </div>

                <div>
                    Ulrich<br />
                    Stranz<br />
                    <br />
                    Zeitbiegung<br />
                    f. Orchester
                </div>

                <div>
                    Karten:<br />
                    DM 3,- im SFB<br />
                    Pavillon Th-Heuss-Platz<br />
                    Mo-Fr 9-13 u 14-17 Uhr<br />
                    u. bei den Theaterkassen
                </div>

            </div>

        </div>

        <div class="bottomPart">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
            <div class="line line-4"></div>
            <div class="line line-5"></div>

            <div class="verticalLine line-6"></div>
            <div class="verticalLine line-7"></div>
        </div>

    </div>
</div>
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.musik-der-gegenwart-1980 {
    &.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;

        svg {
            position: absolute;
            top: 0;
            left: 0;
        }

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

            .topPart {
                height: 24%;
                font-family: $helvetica;
                text-align: left;

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

                    .block-1 {
                        span {
                            display: inline-block;
                            margin: 0 2px;
                            height: 40px;
                            width: 2px;
                            background-color: #fff;
                            vertical-align: baseline;
                            position: relative;
                            top: 10px;
                        }
                    }

                    .block-1,
                    .block-2 {
                        font-size: 58px;
                        font-weight: 600;
                        letter-spacing: 2px;
                        color: #fff;
                        line-height: 1em;
                    }
                }

                .smallTextGrid {
                    display: grid;
                    grid-template-columns: repeat(7, auto);
                    font-size: 18px;
                    font-weight: 400;
                    color: #fff;
                }
            }

            .bottomPart {
                height: 80%;
                overflow: hidden;
                position: relative;

                @supports (clip-path: path("")) {
                    .line {
                        background: #fff;
                    }

                    .verticalLine {
                        background: #fff;
                    }
                }

                .line {
                    height: 600px;
                    width: 100%;
                    position: absolute;

                    &.line-1 {
                        top: 41px;
                        clip-path: path(
                            "M-50,211.197218 L483.112182,211.197218 C488.723226,211.197218 494.294248,210.25275 499.591767,208.403396 L914.502854,63.5587435 C939.637298,54.7843579 967.547954,63.6211425 983.05256,85.2622454 L1054.42892,184.888326 C1066.25988,201.401811 1085.32763,211.197218 1105.64183,211.197218 L1173,211.197218 L1173,211.197218 L1173,250.758162 L1084.05783,250.758162 C1064.95803,250.758162 1046.88948,242.093387 1034.93191,227.199815 L939.989972,108.946407 C936.84537,105.029698 931.594141,103.485874 926.830126,105.077504 L500.347098,247.563087 C494.013111,249.679236 487.378838,250.758162 480.700703,250.758162 L-50,250.758162 L-50,250.758162 L-50,211.197218 Z"
                        );
                    }

                    &.line-2 {
                        top: 137px;
                        clip-path: path(
                            "M-30,195.412903 L451.471859,195.412903 C457.136211,195.412903 462.759383,194.450406 468.101275,192.566509 L787.945774,79.7686225 C814.15655,70.5250054 843.284691,80.491972 858.338154,103.855244 L906.109322,177.99704 C912.710204,188.241739 924.046056,194.451263 936.23307,194.49815 L1174,195.412903 L1174,195.412903 L1174,235.010071 L917.696684,235.915126 C902.677163,235.968163 888.621312,228.524271 880.225311,216.070517 L820.369126,127.286085 C814.52762,118.621403 803.579097,114.983691 793.713749,118.429678 L469.889954,231.542014 C463.317873,233.837656 456.406103,235.010071 449.444622,235.010071 L-30,235.010071 L-30,235.010071 L-30,195.412903 Z"
                        );
                    }

                    &.line-3 {
                        top: 239px;
                        clip-path: path(
                            "M-20,176.460515 L398.179364,176.460515 C403.505924,176.460515 408.795338,175.573924 413.830777,173.837087 L653.362245,91.2172292 C671.091931,85.1018569 690.74919,90.8969526 702.326098,105.652112 L747.672816,163.448026 C754.118138,171.662806 763.980611,176.460515 774.422104,176.460515 L1173,176.460515 L1173,176.460515 L1173,216.011232 L753.621907,216.960758 C742.700152,216.985486 732.392919,211.910367 725.753167,203.238628 L681.311107,145.195805 C671.467077,132.33917 654.406692,127.377152 639.202847,132.948605 L420.699005,213.019389 C415.298266,214.998491 409.591246,216.011232 403.839305,216.011232 L-20,216.011232 L-20,216.011232 L-20,176.460515 Z"
                        );
                    }

                    &.line-4 {
                        top: 340px;
                        clip-path: path(
                            "M-30,159.21623 L329.595508,159.21623 C336.112552,159.21623 342.584568,158.136487 348.748657,156.020861 L482.717707,110.040282 C503.984088,102.741278 527.553892,108.869207 542.572256,125.601904 L566.186096,151.911242 C570.358885,156.560351 576.311422,159.21623 582.558531,159.21623 L1171,159.21623 L1171,159.21623 L1171,199.010297 L576.952816,200.921566 C561.598313,200.970967 547.108489,193.820082 537.807631,181.602995 L529.687063,170.93627 C516.033589,153.001829 492.399445,145.874848 471.107331,153.271291 L348.683843,195.798699 C342.563628,197.924736 336.130447,199.010297 329.651476,199.010297 L-30,199.010297 L-30,199.010297 L-30,159.21623 Z"
                        );
                    }

                    &.line-5 {
                        top: 437px;
                        clip-path: path(
                            "M-20,148.269284 L266.20241,148.269284 C277.480857,148.269284 288.676378,146.342062 299.305635,142.570819 L345.39288,126.219143 C351.096458,124.195524 357.422894,125.010087 362.427842,128.412486 L383.493848,142.733306 C388.800047,146.340498 395.068081,148.269284 401.484278,148.269284 L1188,148.269284 L1188,148.269284 L1188,188 L398.818948,188 C387.770703,188 376.929883,184.999419 367.453996,179.318637 L363.223152,176.782252 C351.378926,169.681654 336.974291,168.268129 323.975726,172.930906 L291.790166,184.476341 C285.290284,186.807944 278.43669,188 271.531269,188 L-20,188 L-20,188 L-20,148.269284 Z"
                        );
                    }
                }

                .verticalLine {
                    height: 360px;
                    width: 40px;
                    position: absolute;
                    bottom: 10px;

                    &.line-6 {
                        left: 0;
                    }

                    &.line-7 {
                        right: 0;
                    }
                }
            }
        }
    }
}
View Compiled
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.