/*----------------------*/
/*------ GENERIC ------*/
/*----------------------*/
/* */
:root {
  --bulma-primary: hsl(190, 100%, 34%);
  --bulma-primary-h: 190;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 34%;

  --bulma-warning: hsl(66, 69%, 54%);
  --bulma-warning-h: 66;
  --bulma-warning-s: 69%;
  --bulma-warning-l: 54%;
  --bulma-warning-invert-l: 0%;

  --bulma-link: hsl(180, 95%, 71%);
  --bulma-link-h: 180;
  --bulma-link-s: 95%;
  --bulma-link-l: 71%;
  --bulma-link-invert-l: 0%;
}
/* */

.is-equal-height {
  height: 100%;
}



/*----------------------*/
/*------ CAROUSEL ------*/
/*----------------------*/
.carousel {
  position: relative;
  white-space: nowrap;
}

.carousel-inner img {
  display: inline;
  vertical-align: middle;
  width: 100px;
  margin: 2rem;
}

.carousel-inner {
  display: inline-block;
  width: max-content;
  animation: 45s slide infinite linear;
}

.carousel:before,
.carousel:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.carousel:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.carousel:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media only screen and (max-width: 768px) {
  .carousel-inner img { width: 65px; margin: 1rem; }

  .carousel:before, .carousel:after { width: 50px; }
}