body {
    display: grid;
    place-content: center;
    min-height: 100vh;
    margin: 0 auto;
}

/*
img {
  width: 600px;
  height: 350px;
  background: #09f;
  border-radius: 25%;
  position: relative;
  transition-duration: 2s;
}

img:hover {
  scale: 2;
  background: purple;
  box-shadow: 0 0 10px purple;
}
*/
@media screen and (min-width: 1001px) {
  img {
    width: 1200px;
    height: 600px;
    animation-duration: 7s;
    animation-name: creciendo; 
  }

  @keyframes creciendo {
    from {
      width: 40px;
      height: 20px;
    }
    to {
      width: 1200px;
      height: 600px;
    }
  }
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
  img {
    width: 1000px;
    height: 500px;
    animation-duration: 7s;
    animation-name: creciendo; 
  }

  @keyframes creciendo {
    from {
      width: 40px;
      height: 20px;
    }
    to {
      width: 1000px;
      height: 500px;
    }
  }
}


@media screen and (min-width: 601px) and (max-width: 800px) {
  img {
    width: 800px;
    height: 400px;
    animation-duration: 7s;
    animation-name: creciendo; 
  }

  @keyframes creciendo {
    from {
      width: 40px;
      height: 20px;
    }
    to {
      width: 800px;
      height: 400px;
    }
  }
}

@media screen and (min-width: 401px) and (max-width: 600px) {
  img {
    width: 600px;
    height: 300px;
    animation-duration: 7s;
    animation-name: creciendo; 
  }

  @keyframes creciendo {
    from { 
      width: 40px;
      height: 20px;
    }
    to {
      width: 600px;
      height: 300px;
    }
  }
}



@media screen and (min-width: 0px) and (max-width: 400px) {
  img {
    width: 400px;
    height: 200px;
    animation-duration: 7s;
    transition-timing-function: ease-in;
    animation-name: creciendo; 
  }

  @keyframes creciendo {
    from {
      width: 20px;
      height: 10px;
    }
    to {
      width: 400px;
      height: 200px;
    }
  }
}