Tschichold #1

<section>
  <div class="container">
    <div class="thick-bar1 black-bar"></div>
    <div class="big-red-circle"></div>
    <div class="thin-bar lower"></div>
    <h1>Jan Tschichold</h1>
    <div class="thin-bar upper"></div>
    <span class="wrap1" aria-hidden="true">The works</span>
    <svg class="wrap2 red-arrow" viewBox="0 0 100 100">
      <g fill="red">
        <path d="M10.099 35.1H59.9v29.8H10.099z" />
        <path d="M94.814 49.71L65.381 69.814l-.287-39.627z" />
      </g>
    </svg>
    <span class="wrap3" aria-hidden="true">of abstract art</span>
    <svg class="wrap4" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" />
    </svg>
    <span class="wrap5" aria-hidden="true">are subtle creations of order</span>
    <span
      class="wrap6"
      aria-label="The works of abstract art are subtle creations of order out of simple contrasting elements."
      >out of simple contrasting elements</span
    >
    <div class="thick-bar2 black-bar"></div>
    <div class="red-box"></div>
  </div>
</section>

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Regular.ttf");
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf");
  font-weight: 600;
}

:root {
  --bg-color: rgb(255, 252, 211);
  --thin-bar: 2px;
  --thick-bar-thickness: 15px;
  --red-box-side: calc(220px + 1.75vw);
  --red-arrow-size: 25px;
}

html {
  box-sizing: border-box;

  font-family: "Poppins", sans-serif;
  font-weight: 600;

  background-color: var(--bg-color);
}

section {
  position: relative;
  top: 0;

  display: grid;
  place-items: center;

  min-height: 500px;
}

.container {
  width: 98%;
  height: 98vh;
  min-height: 600px;

  display: grid;
  grid-template-columns:
    1fr 0.5fr 1fr calc(var(--red-box-side) - var(--red-arrow-size))
    var(--red-arrow-size) max-content auto;
  grid-template-rows: 1fr max-content 1fr 1fr max-content var(--red-box-side) max-content;
  gap: 2px;

  transform: none;

  font-size: 0.8rem;
}

h1 {
  font-family: "EB Garamond", serif;
  font-size: 1.1rem;
  letter-spacing: 0.05rem;
  grid-column: 3 / -1;
  grid-row: 2;
}

.black-bar {
  background-color: black;
}

.thick-bar1 {
  display: none;
}

.thick-bar2 {
  display: none;
}

.thin-bar {
  background-color: black;
  height: var(--thin-bar);
  width: 100%;
}

.thin-bar.lower {
  grid-column: 3 / -1;
  grid-row: 1;
  align-self: end;
}

.thin-bar.upper {
  grid-column: 3 / -1;
  grid-row: 3;
  align-self: start;
}

.big-red-circle {
  border-radius: 50%;
  background-color: red;
  width: 1rem;
  height: 1rem;
  margin: 0 0.25rem;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
}

.wrap1 {
  grid-column: 4;
  grid-row: 4;
  align-self: end;
}

.wrap2 {
  width: 100%;
  grid-column: 5;
  grid-row: 4;
  justify-self: center;
  align-self: end;
}

.wrap3 {
  writing-mode: vertical-lr;
  grid-column: 6;
  grid-row: 6;
  justify-self: center;
}

.wrap4 {
  grid-column: 6;
  grid-row: 7;
  justify-self: center;
  align-self: center;
  width: 0.7rem;
  /* margin required for alignment with wrap5 text */
  margin-bottom: 0.2rem;
}

.wrap5 {
  grid-column: 1 / 6;
  grid-row: 7;
  transform: rotate(180deg);
  align-self: center;
}

.wrap6 {
  writing-mode: vertical-lr;
  grid-column: 3;
  grid-row: 7 / 1;
  transform: rotate(180deg);
  justify-self: end;
}

.red-box {
  position: relative;
  background-color: red;
  width: 100%;
  height: 100%;
  grid-column: 4 / span 2;
  grid-row: 5 / span 2;
}

.red-box:after {
  position: absolute;
  background-color: var(--bg-color);
  content: "";
  border-radius: 50%;
  width: 70%;
  height: 70%;
  margin: 15%;
}

@media screen and (min-width: 768px) {
  :root {
    --red-arrow-size: 30px;
    --red-box-side: 180px;
  }

  html {
    font-size: 1.15rem;
  }

  h1 {
    grid-column: 8;
    grid-row: 2;
  }

  section {
    top: 10rem;
  }

  .container {
    display: grid;
    grid-template-columns:
      1fr max-content 4fr calc(var(--red-box-side) - var(--red-arrow-size))
      var(--red-arrow-size) max-content 1fr 10fr;
    grid-template-rows:
      1fr max-content 4fr max-content var(--thick-bar-thickness) calc(
        var(--red-box-side) - var(--thick-bar-thickness)
      )
      max-content;
    width: 550px;
    max-width: 900px;
    height: 350px;
    transform: rotate(45deg);
    margin: 8rem;
  }

  .thick-bar1 {
    display: block;
    width: var(--thick-bar-thickness);
    height: 95%;
    background-color: black;
    grid-row: 1 / -1;
    grid-column: 1;
    justify-self: center;
    align-self: center;
  }

  .thick-bar2 {
    display: block;
    grid-column: 8;
    grid-row: 5;
    height: var(--thick-bar-thickness);
  }

  .thin-bar.lower {
    grid-column: 8;
    grid-row: 1;
    align-self: end;
  }

  .thin-bar.upper {
    grid-column: 8;
    grid-row: 3;
    align-self: start;
  }

  .big-red-circle {
    width: 2rem;
    height: 2rem;
    grid-column: 6;
    grid-row: 2;
  }

  .wrap1 {
    grid-column: 4;
    grid-row: 5;
    align-self: center;
  }

  .wrap2 {
    grid-column: 5;
    grid-row: 5;
    align-self: center;
  }

  .wrap3 {
    grid-column: 6;
    grid-row: 5 / span 2;
    justify-self: center;
  }

  .wrap4 {
    grid-column: 6;
    grid-row: 7;
    justify-self: center;
    align-self: center;
  }

  .wrap5 {
    grid-column: 2 / span 4;
    grid-row: 7;
  }

  .wrap6 {
    grid-column: 2;
    grid-row: 7 / 1;
  }

  .red-box {
    grid-column: 4 / span 2;
    grid-row: 6;
  }
}