:root {
      /* Tile Dimensions */
      --carousel-tile-spacing: 10px;
      --carousel-tile-width:   calc(var(--carousel-tile-height) / (1 / 1));
      --carousel-tile-height:  20%;
      /* Automatic Offsets - DO NOT ALTER */
      --carousel-offset-left:  calc(-1 * (var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1) / 2));
      --carousel-offset-right: calc(var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1));
}
/* Carousel Container */
.carousel {
      margin: 0;
      box-sizing: border-box;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
}

/* Carousel Row */
.carousel-row {
      white-space: nowrap;
      margin-top: calc((var(--carousel-tile-height) * (var(--carousel-growth-factor) - 1)) / 1);
      margin-bottom: calc((var(--carousel-tile-height) * (var(--carousel-growth-factor) - 1)) / 1);
      margin-left: calc((var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1)) / 2);
      margin-right: calc((var(--carousel-tile-width) * (var(--carousel-growth-factor) - 1)) / 2);
      transition: var(--carousel-transition-2);
}

/* Content Tile */
.carousel-tile {
      position: relative;
      display: inline-block;
      width: var(--carousel-tile-width);
      height: var(--carousel-tile-height);
      margin-right: var(--carousel-tile-spacing);
      transition: var(--carousel-transition-2);
      -webkit-transform-origin: center left;
      transform-origin: center left;
      cursor: pointer;
      cursor: hand;
}


/* Ensure All Elements Inside Tile are Block */
.carousel-tile * {
      display: block;
}

/* Carousel Row on Hover */
.carousel-row:hover {
      -webkit-transform: translate3d(var(--carousel-offset-left), 0, 0);
      transform: translate3d(var(--carousel-offset-left), 0, 0);
}

/* Content Tile on Carousel Row Hover */
.carousel-row:hover .carousel-tile {
      opacity: var(--carousel-fade-opacity);
}

/* Content Tile on Hover on Carousel Row Hover */
.carousel-row:hover .carousel-tile:hover {
      -webkit-transform: scale(var(--carousel-growth-factor));
      transform: scale(var(--carousel-growth-factor));
      opacity: var(--carousel-normal-opacity);
}

/* Content Tile on Hover */
.carousel-tile:hover ~ .carousel-tile {
      -webkit-transform: translate3d(var(--carousel-offset-right), 0, 0);
      transform: translate3d(var(--carousel-offset-right), 0, 0);
}