<main>
  <svg class="back-icon" viewBox="0 0 24 24">
    <path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
  </svg>

  <span class="logo">Travel Times</span>

  <header>
    <h1 class="title">
      Travel in time by sea
    </h1>

    <div class="author">
      <img src="https://raw.githubusercontent.com/vdsabev/editorial-exploration/master/author.png" />&nbsp;by&nbsp;
      <a href="#" rel="author">Jane Walkinson</a>
    </div>

    <p class="subtitle">
      Both of the men had been trained for this moment, their lives had been a preparation for it.
    </p>
  </header>

  <div class="images">
    <img class="images__primary" src="https://raw.githubusercontent.com/vdsabev/editorial-exploration/master/thailand.jpg" />

    <img class="images__secondary" src="https://raw.githubusercontent.com/vdsabev/editorial-exploration/master/jellyfish.jpg" />

    <button type="button" class="images__more">
      <svg viewBox="0 0 24 24">
        <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"
        />
      </svg>
      4 images
    </div>
  </div>

  <section class="text">
    <p>
      Both of the men had been trained for this moment, their lives had been a preparation for it, they had been selected at birth as those who would witness the answer, but even so they found themselves gasping and squirming like excited children.
    </p>
    <p>"And you're ready to give it to us?" urged Loonsuawl.</p>
    <p>"I am."</p>
    <p>"Now?"</p>
    <p>"Now," said Deep Thought.</p>
    <p>They both licked their dry lips.</p>
    <p>"Though I don't think," added Deep Thought. "that you're going to like it."</p>
    <p>"Doesn't matter!" said Phouchg. "We must know it! Now!"</p>
    <p>"Now?" inquired Deep Thought.</p>
    <p>"Yes! Now..."</p>
    <p>"All right," said the computer, and settled into silence again. The two men fidgeted. The tension was unbearable.</p>
    <p>"You're really not going to like it," observed Deep Thought.</p>
    <p>"Tell us!"</p>
    <p>"All right," said Deep Thought. "The Answer to the Great Question..."</p>
    <p>"Yes..!"</p>
    <p>"Of Life, the Universe and Everything..." said Deep Thought.</p>
    <p>"Yes...!"</p>
    <p>"Is..." said Deep Thought, and paused.</p>
    <p>"Yes...!"</p>
    <p>"Is..."</p>
    <p>"Yes...!!!...?"</p>
    <p>"Forty-two," said Deep Thought, with infinite majesty and calm.</p>
  </section>

  <svg class="down-icon" viewBox="0 0 24 24">
    <path d="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" />
  </svg>
</main>

:root {
  --foreground: #1d2c2f;
  --foregroundLight: #384345;
  --neutral: #adb2b3;
  --neutralLight: #fcfcfc;
  --primary: #f8f72c;
  --primaryDark: #f3f208;

  --fontText: 'Merriweather', serif;
  --fontUI: 'Arial', sans-serif;

  --transitionDuration: 0.4s;
  --transitionEasing: cubic-bezier(0.25, 0.1, 0.25, 1);

  --spacing: 3rem;
  --titleFontSize: 5rem;
  --subtitleFontSize: 2rem;
}

@media (min-width: 48em) {
  :root {
    --spacing: 3.6rem;
    --titleFontSize: 7rem;
    --subtitleFontSize: 2.2rem;
  }
}

@media (min-width: 64em) {
  :root {
    --spacing: 6.8rem;
    --titleFontSize: 10rem;
    --subtitleFontSize: 2.4rem;
  }
}

html {
  /* 0.625 of 16px is 10px: https://engageinteractive.co.uk/blog/em-vs-rem-vs-px */
  font-size: 62.5%;
  font-family: var(--fontText);
  color: var(--foreground);
}

body {
  padding: var(--spacing);
  font-size: 1.4rem;
  background: var(--neutralLight);
}

img {
  max-width: 100%;
}

svg {
  fill: currentColor;
}

.back-icon,
.down-icon {
  cursor: pointer;
  width: 3rem;
  margin: 0.1em 0.2em;
}

.logo {
  margin: 0.3em 0;
  color: var(--foregroundLight);
  font-family: var(--fontUI);
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.0375em;
}

.images__more {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: 0;
  font-family: var(--fontUI);
  font-size: 1.2rem;
  text-transform: uppercase;

  transition: background var(--transitionDuration) var(--transitionEasing);
  background: var(--primary);
}

.images__more:hover {
  background: var(--primaryDark);
}

.images__more svg {
  width: 2.4rem;
  padding: 1.3em 0.3em;
}

.title {
  margin-top: 0.96em;
  margin-bottom: 0.1em;
  font-size: var(--titleFontSize);
  font-weight: normal;
  line-height: 1.15;
  letter-spacing: 0.002em;
}

.author,
.author a {
  color: var(--neutral);
}

.author {
  display: flex;
  align-items: center;
  margin-bottom: 4.75em;
  font-family: var(--fontUI);
  font-size: 1.8rem;
}

.author a {
  text-underline-position: under;
}

.author img {
  max-width: 2em;
  margin-right: 1.5rem;
}

.subtitle {
  margin-bottom: 0.1em;
  font-size: var(--subtitleFontSize);
  line-height: 1.3;
}

.text {
  font-size: 1.4rem;
  line-height: 1.75;
  margin-top: 1em;
  letter-spacing: 0.015em;
}

/* Sticky design */
.back-icon,
.down-icon {
  position: sticky;
  border-radius: 50%;
  background: var(--neutralLight);
}

.back-icon {
  top: 1rem;
}

.down-icon {
  bottom: 1rem;
}

@media (min-width: 56em) {
  body {
    padding-left: calc(var(--spacing) / 2);
  }

  main {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: auto calc(var(--spacing) / 2) 1fr var(--spacing) 37.5%;
    grid-template-areas:
      "back-icon . logo   . images"
      ".         . header . images"
      "down-icon . text   . images";

    max-width: 96em;
    margin: 0 auto;
  }

  .back-icon {
    grid-area: back-icon;
    align-self: center;
  }

  .logo {
    grid-area: logo;
    align-self: center;
  }

  .down-icon {
    grid-area: down-icon;
    align-self: flex-end;
  }

  header {
    grid-area: header;
  }

  .text {
    grid-area: text;
  }

  .images {
    grid-area: images;
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 7fr 9fr;
    grid-template-areas:
      "primary primary  "
      "more    secondary";
  }

  .images__primary {
    grid-area: primary;
  }

  .images__secondary {
    grid-row: primary / secondary;
    grid-column: secondary;
    align-self: flex-end;
  }

  .images__more {
    grid-area: more;
  }
}