.gallery {
  --s: 380px; /* the size */
	margin-top:0%;
	margin-left:0;
  display: grid;
  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 17s infinite cubic-bezier(.5,-0.5,.5,1.5);
  background: url(../images/processor.jpg) no-repeat 0 0 / cover;
}
.gallery img {
  grid-area: 1/1;
  width: var(--s);
  max-height:250px;
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t, ) translateZ(calc(var(--s)/2));
  opacity:1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.gallery img:nth-child(2) {--_t: rotateX(-90deg)}
.gallery img:nth-child(3) {--_t: rotateY( 90deg) rotate(-90deg)}
.gallery img:nth-child(4) {--_t: rotateX(180deg) rotate( 90deg)}
.gallery img:nth-child(5) {--_t: rotateX( 90deg) rotate( 90deg)}
.gallery img:nth-child(6) {--_t: rotateY(-90deg)}

@keyframes r {
  0%,3%   {transform: var(--_p)}
  14%,19% {transform: var(--_p) rotateX(90deg)}
  31%,36% {transform: var(--_p) rotateX(90deg) rotateZ(90deg)}
  47%,52% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
  64%,69% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg)}
  81%,86% {transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg)}
  97%,100%{transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg)}
}


.cube-container {
	grid-area:cube;
	padding-left:0;
	padding-top:0;
	display: grid;
	place-content:center; 
	background-color:rgba(31,205,200,0.9);
	animation: b 11s infinite;
}

@keyframes b { 
  0%, 25% {rgba(31,205,200,0.9)}
  25%,50% {background:#29a0b1}
  50%,75% {background:#2192FF}
  75%,100%  {background:#036564}
}
/*
@keyframes b {
 0%,15%  {background:#5582db}
  15%,29% {background: rgba(31,205,200,0.9)}
  29%,43% {background:#036564}
  43%,57% {background: #2192FF}
  57%,71% {background:#B38184}
  71%,85% {background: #29a0b1}
  85%,to  {background:#424254}
}

/*
@keyframes b {
  0%,3%   {background: #774F38}
  14%,19% {background: #C5E0DC}
  31%,36% {background: #036564}
  45%,55% {background: #B38184}
  64%,69% {background: #424254}
  81%,86% {background: #4DBCE9}
  97%,to  {background: #774F38}
}*/

@media (min-width: 0px) and (max-width: 912px) {
	.gallery {
		--s: 180px; /* the size */
		 --_p: perspective(calc(4*var(--s)));
	}
	.cube-container {
	  padding-top:-10%; 
	  background:white;
	}
	.gallery img {
		  width:600;
		  max-height:100px;
	}
}