.box-shadow {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.quote-block-row .row {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* remove above */
.quote-block {
  position: relative;
  padding: 0;
}
.quote-block.magenta .attribution {
  color: #d10074;
}
.quote-block.magenta.horizontal .content-wrap::before, .quote-block.magenta.horizontal .content-wrap::after, .quote-block.magenta.vertical .wrap::before, .quote-block.magenta.vertical .wrap::after {
  background-color: #d10074;
}
.quote-block.magenta .content::before, .quote-block.magenta .content::after {
  border-color: #d10074;
}
.quote-block.indigo .attribution {
  color: #21076a;
}
.quote-block.indigo.horizontal .content-wrap::before, .quote-block.indigo.horizontal .content-wrap::after, .quote-block.indigo.vertical .wrap::before, .quote-block.indigo.vertical .wrap::after {
  background-color: #21076a;
}
.quote-block.indigo .content::before, .quote-block.indigo .content::after {
  border-color: #21076a;
}
.quote-block.cyan .attribution {
  color: #017ac1;
}
.quote-block.cyan.horizontal .content-wrap::before, .quote-block.cyan.horizontal .content-wrap::after, .quote-block.cyan.vertical .wrap::before, .quote-block.cyan.vertical .wrap::after {
  background-color: #017ac1;
}
.quote-block.cyan .content::before, .quote-block.cyan .content::after {
  border-color: #017ac1;
}
.quote-block.mint .attribution {
  color: #00818a;
}
.quote-block.mint.horizontal .content-wrap::before, .quote-block.mint.horizontal .content-wrap::after, .quote-block.mint.vertical .wrap::before, .quote-block.mint.vertical .wrap::after {
  background-color: #00818a;
}
.quote-block.mint .content::before, .quote-block.mint .content::after {
  border-color: #00818a;
}
.quote-block.mango .attribution {
  color: #f4a11e;
}
.quote-block.mango.horizontal .content-wrap::before, .quote-block.mango.horizontal .content-wrap::after, .quote-block.mango.vertical .wrap::before, .quote-block.mango.vertical .wrap::after {
  background-color: #f4a11e;
}
.quote-block.mango .content::before, .quote-block.mango .content::after {
  border-color: #f4a11e;
}
.quote-block.heather .attribution {
  color: #dfdbe0;
}
.quote-block.heather.horizontal .content-wrap::before, .quote-block.heather.horizontal .content-wrap::after, .quote-block.heather.vertical .wrap::before, .quote-block.heather.vertical .wrap::after {
  background-color: #dfdbe0;
}
.quote-block.heather .content::before, .quote-block.heather .content::after {
  border-color: #dfdbe0;
}
.quote-block.dove .attribution {
  color: #dcdcdc;
}
.quote-block.dove.horizontal .content-wrap::before, .quote-block.dove.horizontal .content-wrap::after, .quote-block.dove.vertical .wrap::before, .quote-block.dove.vertical .wrap::after {
  background-color: #dcdcdc;
}
.quote-block.dove .content::before, .quote-block.dove .content::after {
  border-color: #dcdcdc;
}
.quote-block.violet .attribution {
  color: #712c6f;
}
.quote-block.violet.horizontal .content-wrap::before, .quote-block.violet.horizontal .content-wrap::after, .quote-block.violet.vertical .wrap::before, .quote-block.violet.vertical .wrap::after {
  background-color: #712c6f;
}
.quote-block.violet .content::before, .quote-block.violet .content::after {
  border-color: #712c6f;
}
.quote-block.slate .attribution {
  color: #272727;
}
.quote-block.slate.horizontal .content-wrap::before, .quote-block.slate.horizontal .content-wrap::after, .quote-block.slate.vertical .wrap::before, .quote-block.slate.vertical .wrap::after {
  background-color: #272727;
}
.quote-block.slate .content::before, .quote-block.slate .content::after {
  border-color: #272727;
}
.quote-block.grey .attribution {
  color: #757575;
}
.quote-block.grey.horizontal .content-wrap::before, .quote-block.grey.horizontal .content-wrap::after, .quote-block.grey.vertical .wrap::before, .quote-block.grey.vertical .wrap::after {
  background-color: #757575;
}
.quote-block.grey .content::before, .quote-block.grey .content::after {
  border-color: #757575;
}
.quote-block.midgrey .attribution {
  color: #efefef;
}
.quote-block.midgrey.horizontal .content-wrap::before, .quote-block.midgrey.horizontal .content-wrap::after, .quote-block.midgrey.vertical .wrap::before, .quote-block.midgrey.vertical .wrap::after {
  background-color: #efefef;
}
.quote-block.midgrey .content::before, .quote-block.midgrey .content::after {
  border-color: #efefef;
}
.quote-block.white .attribution {
  color: #fff;
}
.quote-block.white.horizontal .content-wrap::before, .quote-block.white.horizontal .content-wrap::after, .quote-block.white.vertical .wrap::before, .quote-block.white.vertical .wrap::after {
  background-color: #fff;
}
.quote-block.white .content::before, .quote-block.white .content::after {
  border-color: #fff;
}
.quote-block + .quote-block {
  margin-top: 3em;
}
.quote-block.horizontal .internal-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.quote-block.horizontal .internal-wrap, .quote-block.vertical .internal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quote-block.horizontal .image {
  margin: 0 0 2em;
}
.quote-block.vertical .image {
  margin: 2em 0 0;
}
.quote-block .content-wrap {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .quote-block.horizontal .internal-wrap {
    flex-direction: row;
  }
  .quote-block.horizontal .image {
    margin: 0 2em 0 0;
  }
}
@media screen and (min-width: 768px) {
  .quote-block.horizontal .content-wrap {
    width: calc(100% - 125px);
  }
}
.quote-block.horizontal .content-wrap, .quote-block.vertical .wrap {
  position: relative;
}
.quote-block.horizontal .content-wrap::before, .quote-block.horizontal .content-wrap::after, .quote-block.vertical .wrap::before, .quote-block.vertical .wrap::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  background-color: #ccc;
  height: 36px;
  width: 60px;
  mask: url("../svg/cyg-bb-quote_quote-marks.svg");
}
.quote-block.horizontal .content-wrap::before, .quote-block.vertical .wrap::before {
  top: -16px;
  left: 22px;
}
.quote-block.horizontal .content-wrap::after, .quote-block.vertical .wrap::after {
  bottom: -16px;
  right: 22px;
  transform: rotate(180deg);
}
.quote-block .content {
  padding: 1.8em 1.4em 1.2em;
}
.quote-block .content::after, .quote-block .content::before {
  content: "";
  display: block;
  position: absolute;
  border-style: solid;
  border-width: 3px;
  border-radius: 10px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 19px 0, 19px 95%, calc(100% - 86px) 95%, calc(100% - 86px) 100%, 0 100%);
}
.quote-block .content::after {
  transform: rotate(180deg);
}
.quote-block .content p:last-of-type {
  margin-bottom: 0;
}
.quote-block .attribution {
  display: block;
  margin-top: 1.2em;
}
.quote-block .image {
  width: 250px;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 50%;
}
.quote-block .image > div {
  padding-bottom: 100%;
}