body {
    margin: 10%;
    font-family: sans;
}

/* Default width for margin images and flip to full width on narrow viewports */

.alignright { float: right; }
.alignleft { float: left; }

img.alignright, img.alignleft, figure.alignright, figure.alignleft {
   width: 50%;
   border: 1px solid black;
}

img.alignright, figure.alignright {
    margin: 0px 0px 1em 1em;
}

img.alignleft, figure.alignleft {
    margin: 0px 1em 1em 0px;
}

@media screen and (max-width: 660px) {
  .alignright, .alignleft {
    float: none;
  }

  img.alignright, img.alignleft, figure.alignright, figure.alignleft {
      width: 100%;
      margin: 0px 0px 1em 0px;
  }
}