/* -------------------------------- 

File#: _3_carousel-v3
Title: Carousel v3
Descr: Display a collection of items and navigate through them
Usage: codyhouse.co/license

-------------------------------- */
.carousel-v3 {
    --carousel-grid-gap: var(--space-xs);
    --carousel-item-auto-size: 260px;
    --carousel-transition-duration: 0.5s;
  }
  
  .carousel-v3__control {
    --size: 60px;
    height: var(--size);
    width: var(--size);
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
  }
  .carousel-v3__control:hover {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
  }
  .carousel-v3__control[disabled] {
    display: none;
  }
  .carousel-v3__control:active {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  .carousel-v3__control .icon {
    --size: 20px;
    display: block;
    color: var(--color-white);
  }