$content-max-width: 1280px;

.contentWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.corner {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  // width is needed so the button can align to the right of the capped
  // column, auto margins alone would shrink this to fit and centre it
  width: 100%;
  max-width: $content-max-width;
  margin-inline: auto;
  padding: 0 1rem 0.5rem;
  box-sizing: border-box;
}

.content {
  box-sizing: border-box;
  // as with .corner, the width is needed to fill the capped column, otherwise
  // auto margins shrink this to fit and each panel ends up its own width
  width: 100%;
  max-width: $content-max-width;
  margin: 0 auto 1rem;
  padding-inline: 1rem;
  overflow-y: auto;
  flex-grow: 1;
  // room for the last section to scroll to the top of the viewport
  padding-bottom: 40vh;
}