:root {
    --object-width: calc(100vw - 1.75rem - (var(--arrow-width) *2));
    --object-height: auto;
    --arrow-width: 32px;
    --slider-py: 24px;
    /*--btn-nav-height: calc(var(--object-width) * 0.5625);*/
    --btn-nav-height: calc(var(--object-width) * 0.4);
}

.carousel-container button#moveRight.btn-nav .fa-chevron-right,
.carousel-container button#moveLeft.btn-nav .fa-chevron-left {
  font-size: 1em;
}

@media (min-width: 500px) {
  :root {
    --object-width: calc((100vw - 3.5rem - (var(--arrow-width) *2)) /2);
  }
}

@media (min-width: 640px) {
  :root {
    --arrow-width: 50px;
  }

  .carousel-container button#moveRight.btn-nav .fa-chevron-right,
  .carousel-container button#moveLeft.btn-nav .fa-chevron-left {
    font-size: 1.5em;
  }
}

@media (min-width: 1024px) {
  :root {
    --object-width: calc((100vw - 4.75rem - (var(--arrow-width) *2)) /3);
  }
}

@media (min-width: 1280px) {
  :root {
    --object-width: calc((100vw - 7rem - (var(--arrow-width) *2)) /4);
  }
}

#carousel .slider-content {
    width: 100% !important;
    white-space: nowrap !important;
    position: relative !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}


.object {
  width: var(--object-width);
  height: var(--object-height);
  display: inline-table;
  position: relative;
  padding: 0;
  transition: all 0.8s ease-in-out;
  white-space: normal !important;
}

.btn-nav {
  width: var(--arrow-width);
  height: var(--btn-nav-height);
  position: absolute;
  top: 0;
  outline: none;
  border: none;
  z-index: 100000;
  visibility: hidden;
}

.moveLeft {
  left: 0;
}

.moveRight {
  right: 0;
}

.carousel-container:hover .btn-nav,
.carousel-container:hover .carousel-container-indicators {
  visibility: visible;
}

.slider-content.next-animation {
  transition: transform 0.7s ease;
  pointer-events: none;
}

ß .prev:hover .i {
  color: black;
  background-color: rgba(255, 255, 255, 1) !important;
}