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

.callout {
  padding: 30px;
  border-radius: 15px;
}
.callout.magenta {
  background-color: #d10074;
  color: #fff;
}
.callout.indigo {
  background-color: #21076a;
  color: #fff;
}
.callout.cyan {
  background-color: #017ac1;
  color: #fff;
}
.callout.mint {
  background-color: #00818a;
  color: #fff;
}
.callout.mango {
  background-color: #f4a11e;
  color: #272727;
}
.callout.heather {
  background-color: #dfdbe0;
  color: #272727;
}
.callout.dove {
  background-color: #dcdcdc;
  color: #272727;
}
.callout.violet {
  background-color: #712c6f;
  color: #fff;
}
.callout.slate {
  background-color: #272727;
  color: #fff;
}
.callout.grey {
  background-color: #757575;
  color: #fff;
}
.callout.midgrey {
  background-color: #efefef;
  color: #272727;
}
.callout.white {
  background-color: #fff;
  color: #272727;
}