picture,
picture img {
  margin: 0px auto;
  width: 100%;
  max-width: 100%;
}
.hero-image {
  margin: 40px 20px 20px;
  padding: 0px 30px;
  width: -webkit-fill-available;
  background: var(--color-purple);
  background-repeat: no-repeat;
  background-size: 120%;
  background-position: top center;
  border-radius: 40px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.hero-image img {
  transform: translateY(-40px);
}

@media screen and (max-width: 800px) {
  .hero-image {
    border-radius: 30px;
  }
}

@media screen and (max-width: 600px) {
  .hero-image {
    margin: 20px 12px 20px;
    padding: 0px 12px;
    border-radius: 16px;
  }
  .hero-image img {
    transform: translateY(-20px);
  }
}

{# BEYOND IMAGE #}
.dnd-section:has(.beyond-image) {
  overflow: hidden;
}
.beyond-image {
  position: relative;
  width: 100%;
}
.beyond-image picture,
.beyond-image picture img {
  max-width: inherit;
}