* {
  font-family: "Fira Code", sans-serif;
  font-size: 90%;
  margin: 0;
}

figure {
  width: 600px;
  height: 315px;
  overflow: hidden;
  padding: 2rem;
  background-color: #e3f3ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%232563eb' fill-opacity='0.09'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

.side-image {
  float: right;
  margin: -1.5rem -3.5rem 0 0;
  display: inline-block;
  height: 40%;
  width: 30%;
  max-height: 21rem;
  max-width: 21rem;
  margin: 1rem;
}

.quote {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 2rem;
  line-height: 1.15;
  text-indent: -0.45em;
  color: black;
}

@supports (hanging-punctuation: first) {
  .quote {
    text-indent: 0;
  }
}

.cite {
  font-size: calc(0.875rem + 0.125 * (100vw - 30rem) / 30);
  font-weight: 400;
  line-height: 1.25;
  font-weight: 600;
  font-size: 1.25rem;
  color: #ff0044;
}