.hero-background {
  position: absolute;
  top: -100%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  will-change: transform;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  text-align: left;
  min-height: 250px;
  padding: 50px 0;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.4));
  transform: rotate(-1deg);
}
.hero-content h1,
.hero-content h2,
.hero-content h3 {
  margin: 0;
  padding: 15px 20px;
  color: #f2efe9;
  line-height: 1.2em;
}
.hero-content.hero-blob-placeholder h1,
.hero-content.hero-blob-placeholder h2,
.hero-content.hero-blob-placeholder h3 {
  background: #f75e50;
  border-radius: 30px;
}
.hero-content svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.hero-content svg path:first-child {
  fill: #f75e50;
}
.hero-content svg path:nth-child(2) {
  fill: none;
  stroke: rgba(242,239,233,0.8);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 8, 6;
}