<main>
  <b class="rs4 blue vlr">
    <q>Unforgettable!</q>
    <cite>Rita Sodyte</cite>
  </b>
  <b class="rs3 cyan"></b>
  <b class="cs1 cyan"></b>
  <b class="cs4 yellow">
    <q>The best game ever</q>
    <cite>Gamer Monthly</cite>
  </b>
  <b class="rs3 blue vlr">
    <q class="md">A true test of mental agility.</q>
  </b>
  <b class="cs1 blue"></b>
  <b class="cs2 red"></b>
  <b class="rs3 green vlr">
    <q class="md">Hours of entertainment</q>
  </b>
  <b class="cs2 red"><q>Level Up</q></b>
  <b class="green"></b>
  <b class="green"></b>
  <b class="cs2 rs2 yellow">
    <q>Lost track of time</q>
  </b>
  <b class="orange"></b>
  <b class="cs2 green"><q>Classic</q><cite>Modern Gamer</cite></b>
  <b class="red"></b>
  <b class="cs2 orange"></b>
  <b class="green"></b>
  <b class="rs2 blue"></b>
  <b class="cs3 red">
    <q class="md">The ultimate puzzle-solving challenge</q>
  </b>
  <b class="blue"></b>
  <b class="orange"></b>
  <b class="rs2 blue"></b>
  <b class="yellow"></b>
  <b class="cs3 blue"><q>Endless fun</q></b>
  <b class="cs3 yellow"><q>Endless possibilities</q></b>

  <h1>The Iconic Puzzle Game That Stands the Test of Time</h1>
  <b class="cs2 rs2 red"><q class="md">Hooks you from the first block</q><cite>Player One</cite></b>
  <b class="rs4 cyan vlr"><q class="md">A classic that never gets old</q></b>
  <b class="cs4 orange">
    <q class="md">Simple, addictive, and timeless fun.</q>
  </b>
  <article class="cs4 rs4">
    In the vast world of video games, only a few titles have managed to achieve the status of true icons. One such game that has captivated generations of players is Tetris. Created by Russian software engineer Alexey Pajitnov in 1984, Tetris remains a timeless masterpiece, loved and played by millions worldwide.
  </article>
  <b class="cs2 rs2 yellow"><q class="md">Highly addictive</q><cite>Player Two</cite></b>
</main>

/* === COLORS === */
.cyan { background-color: hsl(185, 86%, 70%); color: hsl(185, 86%, 10%); }
.yellow { background-color: hsl(54, 93%, 66%); color: hsl(54, 93%, 8%); }
.purple { background-color: rgb(96, 64, 176); }
.green { background-color: hsl(87, 78%, 63%); color: hsl(87, 78%, 10%); }
.red { background-color: hsl(338, 76%, 58%); color: hsl(338, 76%, 92%);  }
.blue { background-color: hsl(214, 78%, 61%); color: hsl(214, 78%, 93%); }
.orange { background-color: rgb(230, 117, 64); }

/* === GRID === */
.cs1 { grid-column: span 1; }
.cs2 { grid-column: span 2; }
.cs3 { grid-column: span 3; }
.cs4 { grid-column: span 4; }
.rs2 { grid-row: span 2; }
.rs3 { grid-row: span 3; }
.rs4 { grid-row: span 4; }
.vlr {
  text-orientation: mixed;
  writing-mode: vertical-rl;
}

/* === TAGS === */
article {
  font-size: clamp(0.75rem, 0.2143rem + 1.7143vw, 1.5rem);
  line-height: 1.5;
  overflow-y: auto;
  padding:clamp(0.75rem, 0.2143rem + 1.7143vw, 1.5rem);
  text-align: center;
}
body {
  background-color: hsl(180, 25%, 15%);
  margin: 0;
}
b {
  display: grid;
  padding: 1ch;
  place-content: center;
  text-align: center;
}
cite {
  font-size: clamp(0.5rem, 0.3295rem + 0.8523vw, 0.875rem);
  font-weight: 300;
  white-space: nowrap;
}
cite::before { content: "— "; }
h1 {
  font-size: clamp(2rem, 0.8636rem + 5.6818vw, 4.5rem);
  grid-column: 1 / span 7;
  grid-row-start: 9 / span 2;
  line-height: 1.1;
  padding-inline: .25ch;
  text-align: center;
}
main {
  aspect-ratio: 1 / 2;
  background: darkslategray;
  color: hsl(182, 19%, 92%);
  display: grid;
  font-family: ui-sans-serif, system-ui, sans-serif;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(14, 1fr);
  margin-inline: auto;
  max-inline-size: 1024px;
}
q {
  font-size: clamp(0.875rem, -0.2045rem + 5.3977vw, 3.25rem);
  line-height: 1;
  margin-block-end: .25ch;
}
q.md {
  font-size: clamp(0.625rem, -0.1136rem + 3.6932vw, 2.25rem);
}
@media (max-width: 500px) {
  article {
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  place-self: start;
  }
}