body {
  margin: 0;
  padding: 0;
}

.outer {
  position: relative;
  /* clip-path: ellipse(clamp(30rem, 80vw, 50rem) 12rem at 50% 6rem); */
  clip-path: ellipse(
    clamp(30rem, 80vw, 50rem)
    clamp(4rem, 30vw, 12rem) at 50% 
    clamp(3rem, 20vw, 6rem));
  /* aspect-ratio: 16 / 9; */
}

.outer-blur::before {
  position: absolute;
  inset: 0;
  content: '';
}

.outer-blur {
  /* height: 300px; */
  width: 120%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(.5rem);
  position: absolute;
  inset: -2rem -2rem 0;
  aspect-ratio: 21 / 9;
}

.inner-image {
  z-index: 200;
  position: relative;
  /* height: 300px; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media screen and (min-width:768px) {
  .inner-image {
    width: 60%;
    left: 20%;
  }
}