html, body {
  margin:0;
  padding:0;
  display:block;
  width: 100%;
}

body { height: 100vh }

body * { box-sizing: border-box; }

:root {
  --carousel-pad: 20px;
  --carousel-perspective: 1500px;
}

#Canvas {
  position:relative;
  width: 100%;
  height: 100vh;
  background-color: #AAA;
  
  overflow:hidden;
  display:flex;
  flex-direction: row;
  flex-wrap:nowrap;
}

.Scene {
  position:relative;
  width:75%;
  height:75%;
  
  margin: 0 auto 0 auto;
  background-color: #000;
  perspective: var(--carousel-perspective);
  display:flex;
  justify-content: center;
  align-items:center;
  overflow:hidden;
}

.Carousel {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s;
  pointer-events:none;
  
  -webkit-font-smoothing: antialiased;
  font-smooth:always;
}

.Carousel > * {
  top: var(--carousel-pad);
  left: var(--carousel-pad);
  position: absolute;
  transition: transform 1s, opacity .5s, background-color .5s;
  width: calc( 100% - var(--carousel-pad) - var(--carousel-pad) );
  height: calc( 100% - var(--carousel-pad) - var(--carousel-pad) );
  pointer-events:all;
}

figure {
  margin:0;
  padding:0;
  background-color: #aaa;
  
  cursor:pointer;
  overflow:hidden;
}

figure:hover {
  background-color: #fff;
}

figure:hover > figcaption {
  height: 32px;
}

figure img {
  display:block;
  width:90%;
  height:90%;
  margin: 5%;
  object-fit: contain;
}

figure figcaption {
  position:absolute;
  display:block;
  background-color: #000;
  color: #fff;
  height: 0;
  text-align:center;
  font-size: 20px;
  bottom:0;
  left:0;
  width: calc(100%);
  
  transform: translateZ(0) scale(1,1) !important;
  transition: height .5s;
}