* {
  // outline: 1px dotted salmon;
}
article {
  max-width: 100%;
  column-width: 30em;
  column-gap: 2em;
  @media (min-width:640px) {
    max-width: 98%;
    margin-right: 1%;
    margin-left: 1%;
    padding-right: 2.5%;
    padding-left: 2.5%;
  }
}
.wrap-module {
  break-inside: avoid-column; 
  overflow: auto;
}
@media (min-width:500px) {
  .has-pullquote {
    position: relative;
    // break-inside: avoid-column; 
    // background: rgba(0, 0, 0, 0.125);
  }
  .has-pullquote::before {
    content: attr(data-pullquote);
    position: absolute;
    right: 0;
    top: 1.175rem;
    width: 15rem;
    height: 15rem;
    font-size: 1.25em;
    line-height: 1.25;
    font-style: italic;
    padding: .5em;
    border-top: .5em solid rgba(black,.75);
    // background: rgba(0, 0, 0, 0.125);
  }
  .shape-rect {
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    float: right;
    shape-margin: 1rem;
    width: 16rem;
    height: 16rem;
    // background: rgba(0, 0, 0, 0.125);
  }
}