.app {
    margin: 0 -15px;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
}.app > * {
    grid-column: 2 / -2;
}.app > .full {
    grid-column: 1 / -1;
}
.hs {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(600, minmax(280px,calc(30% - 40px)) );
    grid-template-rows: 1fr;
    padding: 0 20px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    user-select: none;
    cursor: pointer;
    scroll-behavior: smooth;
}
.hs > div {
    text-align:center;
    scroll-snap-align: center;
}

button .active {
    border: 1px solid red;
    background: white;
}
.bounce {
	animation: bounce 3s 5;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(30px);
  }
  60% {
    transform: translateY(15px);
  }
}

/*--- CUBE ---*/

:root{
/*
    --box:  200px;
    --box2: 100px;
    --accw: 30px;
    --acco: 44px;
    --accor: 114px;
*/
    --container: 320px;

    --box:  calc(var(--container) * 0.6);
    --box2: calc(var(--box) / 2);
    --accw: calc(var(--box) / 7);
    --acco: calc(var(--box) / 5);
    --accor: calc(var(--box) * 0.6);
}

.scene {
    width:  var(--container);
    height: var(--container);
    perspective: 1200px;
    position: relative;
}

.box {
    width: var(--box);
    height: var(--box);
    position: relative;
    transform-style: preserve-3d;
    transform: translateX(var(--box2)) translateY(calc(var(--box2) / 1.5)) rotateY(60deg) rotateX(-30deg) rotateZ(-30deg);
}

.left {
    background: #6A9;
    width: var(--box);
    height: var(--box);
    position: absolute;
    transform: translateX(calc(var(--box2) * -1)) rotateY(-90deg);
}
.left::after{
    content: "";
    width: var(--box);
    height: var(--box);
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at 100% 0, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}

.right {
    background: #A86;
    width: var(--box);
    height: var(--box);
    position: absolute;
    transform: translateZ(var(--box2)) rotateY(0deg);
}
.right::after{
    content: "";
    width: var(--box);
    height: var(--box);
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at 0 0, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}

.top {
    background: #123;
    width: var(--box);
    height: var(--box);
    position: absolute;
    transform: translateY(calc(var(--box2) * -1)) rotateX(90deg);
}
.top::after{
    content: "";
    width: var(--box);
    height: var(--box);
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at 0 100%, rgba(20,20,20,0.25) 0%,rgba(20,20,20,0.65) 100%);
}

.accent1 {
    background: #FF8;
    width: var(--accw);
    height: var(--box);
    transform: translateX(var(--acco));
}

.accent2 {
    background: #FEC;
    width: var(--box);
    height: var(--accw);
    transform: translateY(calc(var(--acco) * -2));
}

.accent3 {
    background: #FEC;
    width: var(--accw);
    height: var(--box);
    transform: translateX(var(--accor));
}

.gridelement label{ width: 20%; text-align: right; display: inline-block; }
.gridelement select{ width: 70%; }

.oos::after{
    content: " Out of Stock";
    color: red;
}