.carousel__btns {
  display: none;
}

@media only screen and (max-width: 576px) {
  .carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
  }

  .carousel__btns {
    display: block;
  }

  .carousel__next,
  .carousel__prev {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .carousel__next {
    right: 0;
  }

  .carousel__prev {
    left: 0;
  }

  .carousel__list {
    display: flex !important;
    gap: 1rem;
    width: 100%;
    transition: transform 0.24s ease;
  }

  .carousel__item {
    min-width: calc(100% - 1rem);
  }

  .carousel__btns + .carousel__list .carousel__item {
    margin: 0 32px;
    min-width: calc(100% - 1rem - 64px);
  }

  .carousel__btns + .carousel__list .carousel__item:nth-child(1) {
    margin: 0 32px 0 40px;
  }

  .carousel__btns + .carousel__list .carousel__item:last-child {
    margin: 0 40px 0 32px;
  }

  .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .carousel__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--color-bg-gray);
    box-shadow: inset var(--style-shadow);
    cursor: pointer;
    transition: var(--style-transition);
  }

  .carousel__dot.carousel__dot--active {
    background-color: var(--color-theme);
  }
}