@media screen and (min-width: 1024px) {
  :root {
    --spacing-section: 1rem;
    --spacing-container: 2rem;
  }
}

.container {
  width: min(100%, var(--container-max-width));
}

.header-section {
  display: grid;
  gap: var(--spacing-section);
}

.post-quote {
  font-size: 1.2rem;
  font-style: italic;
  align-self: flex-end;
  margin-bottom: 0;
}

section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section);
}

.img-thumbnail {
  max-height: 50vh;
  max-width: min(calc(50vh * 16 / 9), 100%);
  border-radius: var(--border-radius-normal);
}

@media screen and (min-width: 1024px) {
  .header-section {
    grid-template-columns: 60% 1fr;
  }
}