.carousel_container {
    max-width: 1440px;
    margin: 0 auto ;
    padding:1rem 0 1rem 4%;
}

  .carousel h2 {
    margin: 0;
  }

 .carousel a {
    text-decoration: none;
    color: #fff;
  }

  .carousel img {
    aspect-ratio: 1/1;
    width: 220px;
    height: 220px;
    padding: 3.2rem;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    --user-drag: none;
    border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 4px);
  }

  .carousel p {
    font-size: 1.3rem;
    margin: 0;
    margin-bottom: 18px;
    text-align: center;
  }

  .carousel span {
    color: #a7a7a7;
    font-size: 14px;
  }

  .dragging a {
      pointer-events: none;
    }
  

  .carousel__wrapper {
    position: relative;
    margin-bottom: 24px;
  }


    @media only screen and (min-width: 1180px) {
        .carousel__wrapper .has-arrows .carousel__arrows {
            display: flex;
          }
          .carousel__wrapper .has-arrows  .carousel__content {
              justify-content: space-between;
            
          }
    }


  .carousel__content {
    overflow-y: hidden;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: grid;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding: 0;
    margin: 0;
    grid-gap: 40px;
    grid-auto-flow: column;
    list-style: none;


  }
  .carousel__content::-webkit-scrollbar {
    display: none;
  }

  .carousel__item{
    background-color: var(--background-color);
    border-radius: clamp(0px, (100vw - 4px) * 999, 20px);
  }

  .carousel__item .carousel__description {
      width: 100%;
    }

    .carousel__description a {
      display: flex;
      justify-content: center;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      position: relative;
      user-select: none;
      margin: 10px 0px;
      padding: 16px;
      background: #181818;
      border-radius: clamp(0px, (100vw - 4px) * 999, 8px);
      cursor: pointer;
    }
  
    .carousel__controls{
        margin: 1.5rem 0;
    }
  .carousel__arrow {
    padding: 0;
    background: var(--red);
    box-shadow: none;
    border: 0;
    padding : 1rem;
    cursor: pointer;
  }
  .carousel__arrow::before {
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
    background-size: contain;
    filter: brightness(5);
    display: block;
    width: 18px;
    height: 12px;
    cursor: pointer;
  }

  .carousel__arrow.arrow-prev::before {
    transform: rotate(90deg);
  }
  .carousel__arrow.arrow-next::before {
    transform: rotate(-90deg);
  }

  .carousel__arrow.disabled ::before {
      filter: brightness(2);
    }