.classify-content
  display: flex

.project-classify-page
  display: flex
  flex: 1

  > .subject
    flex: 4

  > .classifier-task
    display: flex
    flex: 1
    flex-direction: column
    padding-left: 1vw

  .task-viewer
    flex: 1 0 auto

  .task-nav
    border-top: 1px solid
    display: flex
    flex: 0 0 auto
    margin-top: 1em

    button
      @extends $reset-button
      flex: 1 0 auto
      letter-spacing: 0.05em
      padding: 0.5em 1em
      text-transform: uppercase

      &:not(:first-child)
        border-left: 1px solid

      &:disabled
        opacity: 0.4

      &.backward
        flex-grow: 0

.subject-viewer
  text-align center

.subject-container
  color: gray

.subject-image
  max-height: 95vh

.subject-viewer-svg
  outline: 1px dashed rgba(yellow, 0.5)

  &[data-tool]
    cursor: crosshair

@require "./task-viewer"
@require "./drawing-tool"

.classify-content
  display: flex

.project-classify-page
  display: flex
  flex: 1

  > .subject
    flex: 4

  > .classifier-task
    display: flex
    flex: 1
    flex-direction: column
    padding-left: 1vw

  .task-viewer
    flex: 1 0 auto

  .task-nav
    border-top: 1px solid
    display: flex
    flex: 0 0 auto
    margin-top: 1em

    button
      @extends $reset-button
      flex: 1 0 auto
      letter-spacing: 0.05em
      padding: 0.5em 1em
      text-transform: uppercase

      &:not(:first-child)
        border-left: 1px solid

      &:disabled
        opacity: 0.4

      &.backward
        flex-grow: 0

.subject-viewer
  text-align center

.subject-container
  color: gray

.subject-image
  max-height: 95vh
  max-width: 100%

.subject-viewer-svg
  outline: 1px dashed rgba(yellow, 0.5)

  &[data-tool]
    cursor: crosshair

@require "./task-viewer"
@require "./drawing-tool"

Make sure subject image shrinks
Make sure subject image shrinks