<div class="poster container">
  <h1><span>der</span> <span>Film</span></h1>
  <p class="what">Kunstgewerbemuseum Zürich<br>Ausstellung</p> 
  <div class="when">
    <p>10.Januar bis 30.April 1960</p>
    <p>Offen: Montag 14-18, 20-22<br>
      Dienstag-Freitag 10-12, 14-18, 20-22<br>
      Samstag-Sonntag 10-12, 14-17
    </p>
  </div>
</div>
<div class="container">
   <p>Original poster: Josef Müller Brockmann</p>
</div>
* { margin: 0; padding: 0;}

body {
  font-family: sans-serif;  
}

.container {
  margin: 0 auto;
  max-width: 40em;  
}

.poster {
  background-color: black;
  height: 58em;
  padding: 2em;
  margin-bottom: 1em;
}
@media ( min-width: 50em ) {
  .poster {
    max-width: 40em;
    display: grid;
  grid-template-columns: repeat( 4, 1fr );
  grid-template-rows: 3fr 2fr 1fr;
  padding: 0;
  }
}

h1 {
  display: contents;
  letter-spacing: -0.2em;
  color: white;
}
h1 span {
  grid-row-start: 2;
  font-size: 3em;
}
@media ( min-width: 50em ) {
  h1 span {
    font-size: 7em;
  }
}
h1 span:nth-child(1) { 
  grid-column: 1 / 3;
  opacity: 0.5;
  color: lightgreen;
}
h1 span:nth-child(2) {
  grid-column: 2 / 5;
  text-align: right;
  z-index: 1;
}
p {
  margin-bottom: 1em;
}
.what,
.when {
  color: red;
  grid-column: 2 / 4; 
}
.what {
  padding-top: 4vh;
}
.when {
  padding: 8vh 0 4vh; 
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.