:root {
    --gap: 0;
    --line: 1px solid #333;
    --pad: 28px;
    --maxw: 1000px;   
  }

  body {
    font-family: "Georgia", "Times New Roman", serif;
    margin: 18px;
    background: #fff;
    color: #111;
  }

  .page {
    max-width: var(--maxw);
    margin: 0 auto;
    border: var(--line);
    box-sizing: border-box;
  }

  .grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 200px 200px 200px 200px 200px;
    grid-template-areas:
      "header header header"
      "video  video  coords"
      "poem   poem   person"
      "poem   poem   order"
      "flag   meme   order";
  }

  .grid > div {
    border: var(--line);
    padding: var(--pad);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    background: #fff;
  }

  .header {
    grid-area: header;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video {
    grid-area: video;
    font-size: 16px;
    line-height: 1.4;
  }

  .coords {
    grid-area: coords;
    font-size: 15px;
  }

  .poem {
    grid-area: poem;
    font-size: 16px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  .person {
    grid-area: person;
    font-size: 15px;
    align-items: flex-start;
    padding-top: 20px;
    grid-row: 3 / span 1;
  }

  .order {
    grid-area: order;
    font-size: 15px;
    align-items: flex-start;
    padding-top: 18px;
    grid-row: 4 / span 2;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }

  .flag {
    grid-area: flag;
    font-size: 15px;
    align-items: flex-start;
  }

  .meme {
    grid-area: meme;
    font-size: 15px;
    align-items: flex-start;
  }

  /* small responsive tweaks for mobile */
  @media (max-width: 720px) {
    .grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "header"
        "video"
        "coords"
        "poem"
        "person"
        "order"
        "flag"
        "meme";
    }

    .page { padding: 8px; }
    .grid > div { padding: 18px; }
    .header { font-size: 26px; }
  }