.imagenes-kids{
    width: 100%;
}

.imagenes-kids-container{
    display: flex;
    align-items: center;
    justify-content: center;

}

.imagenes-kids-container ul{
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr ; 
    grid-template-rows: 1fr 1fr; 
    gap: 0px 0px; 
    grid-template-areas: 
    "sol mariposa abeja kid1 "
    " kid2 kid3 kid4 kid5"; 
    padding: 0;
    list-style: none;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}


.imagenes-kids-container ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    animation-name: mover-sol;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition-timing-function: ease;
    animation-direction: alternate;
    ;
}


.imagenes-kids-container ul li img{
    max-width: 150px;
    width: 100%;
}

.imagenes-kids-container ul li:nth-child(1)  { 
    grid-area: sol; 
    animation-delay: 0ms
    }

.imagenes-kids-container ul li:nth-child(2)  {
     grid-area: mariposa; 
     animation-delay: 300ms
    }

.imagenes-kids-container ul li:nth-child(3)   {
     grid-area: abeja; 
     animation-delay: 600ms
    }

.imagenes-kids-container ul li:nth-child(4)  {
     grid-area: kid1; 
     animation-delay: 900ms
    }

.imagenes-kids-container ul li:nth-child(5)  {
     grid-area: kid2; 
     animation-delay: 1000ms
    }

.imagenes-kids-container ul li:nth-child(6)  { 
    grid-area: kid3; 
    animation-delay: 1300ms
}
  
.imagenes-kids-container ul li:nth-child(7)  { 
    grid-area: kid4; 
    animation-delay: 1600ms
}

.imagenes-kids-container ul li:nth-child(8)  { 
    grid-area: kid5; 
    animation-delay: 1900ms
}
  
  
@keyframes mover-sol {
    from {
        transform: translateY(0px);
    }

    to{
        transform: translateY(20px)
    };
}


  @media screen and (min-width: 768px){

    .imagenes-kids-container ul{
        display: grid; 
        grid-auto-columns: 1fr; 
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
        grid-template-rows: 1fr 1fr; 
        gap: 0px 0px; 
        grid-template-areas: 
        ". sol . . . mariposa"
        "abeja kid1 kid2 kid3 kid4 kid5"; 
        padding: 0;
        list-style: none;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
    }

    .imagenes-kids-container ul li:nth-child(1)  { grid-area: sol; }

  .imagenes-kids-container ul li:nth-child(2)  { grid-area: mariposa; }

  .imagenes-kids-container ul li:nth-child(3)   { grid-area: abeja; }
  
  .imagenes-kids-container ul li:nth-child(4)  { grid-area: kid1; }
  
  .imagenes-kids-container ul li:nth-child(5)  { grid-area: kid2; }
  
  .imagenes-kids-container ul li:nth-child(6)  { grid-area: kid3; }
  
  .imagenes-kids-container ul li:nth-child(7)  { grid-area: kid4; }

  .imagenes-kids-container ul li:nth-child(8)  { grid-area: kid5; }
  

    .imagenes-kids-container ul li img{
        max-width: 150px;
        width: 100%;
    }
  }