GenderDysphoria.fyi/scss/_gutter.scss

.gutter {

  @media screen and (min-width: 800px) {
    position: relative;
    height: 0;
    left: calc(100% + 1em);
    width: 400px;
    padding: 0 1em;

    @media (max-width: 1000px) {
      width: 300px;
    }
  }

  @media screen and (min-width: 500px) and (max-width: 800px) {
    float: right;
    width: 300px;
    margin-left: 1em;
    zoom: 0.9;
  }

  @media print {

    page-break-inside: avoid;
    clear: both;

    &:not(.print-inline) {
      float: right;
      width: 40vw;
      margin-left: 1em;
    }
  }

  // outline: 1px solid red;

  &.flex, .flex {
    .tweet {
      flex: none;
    }
  }

  > a > img:not(.card-img-top), > img {
    max-width: 100%;
    margin-bottom: 5px;
  }
}

.flex, .gutter.flex {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media print {
    &.print-row {
      flex-direction: row;
    }
  }

  &.flex-end {
    justify-content: flex-end;
  }

  &.flex-center {
    justify-content: center;
  }
}