.section1 {
  position: relative;
  width: 100vw;
  margin-top: -35%; /* overlap hero by 100px */
  margin-left: -10%;
  padding: 25% 3rem;
  overflow: hidden;
  background-image: url("../images/mobile/section1-bg.svg");
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  z-index: 3; /* above hero (which is z-index: 1) */
  text-align: center;
  color: #fff;
}

.section1 h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section1 p {
  font-size: 1.2rem;
}

@media (min-width: 750px) {
  .section1 {
    padding-inline: 10%;
    overflow: hidden;
    background-image: url("../images/mobile/section1-bg.svg");
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    padding-bottom: 10%;
  }
}