#sombreamento{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
            rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#MOVEpartONE{
  animation: movePARTone 15s ease-in-out infinite;
}
@keyframes movePARTone {
  0% {
    transform: translateY(-60%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-60%);
  }
  
}

#MOVEpartTWO{
  animation: movePARTtwo 15s ease-in-out infinite;
}
@keyframes movePARTtwo {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-60%);
  }
  100% {
    transform: translateY(0%);
  }
  
}


/*     a lógica para 6 colunas entre os intervalos da width da view porte entre >= 896px e < 1024px*/

@media (min-width: 896px) {
  .CUSTOM-grid-container {
    grid-template-columns: repeat(6, 1fr);
  }

  /* span-3: col-span-3 */
  .CUSTOM-span-3 {
    grid-column: span 3;
  }

  /* Ajuste: item normal (col-span-2) */
  .CUSTOM-grid-item:not(.CUSTOM-span-3) {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .CUSTOM-grid-container {
    grid-template-columns: repeat(1, 1fr);
  }

/* Ajuste: item normal (col-span-2) */
  .CUSTOM-span-3, .CUSTOM-grid-item:not(.CUSTOM-span-3) {
    grid-column: span 1;
  }

  
}

#CUSTOM-sombreado-animado{
  animation: sombreado 5s ease infinite;
}

@keyframes sombreado {

  0%{
 box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 29px 0px;
  }

  25%{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 10px;
  }

  50%{
  box-shadow: rgba(100, 100, 111, 0.2) -7px 7px 29px 0px;
  }
  75%{
  box-shadow: rgba(100, 100, 111, 0.2) -7px 0px 29px 10px;
  }
  100%{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
}