Carousel component - Partial

carousel.html

<div class='demo-container'>
  <div class='carousel'>
    <input class='carousel__activator' checked='checked'>
    <input class='carousel__activator'>
    <input class='carousel__activator'>
    <div class='carousel__controls'>
      <label class='carousel__control carousel__control--forward'>
        👉
      </label>
    </div>
    <div class='carousel__controls'>
      <label class='carousel__control carousel__control--backward'>
        👈
      </label>
      <label class='carousel__control carousel__control--forward'>
        👉
      </label>
    </div>
    <div class='carousel__controls'>
      <label class='carousel__control carousel__control--backward'>
        👈
      </label>
    </div>
    <div class='carousel__screen'>
      <div class='carousel__track'>
        <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
          <div class='demo-content'>
            a
          </div>
        </div>
        [...]
        <div class='carousel__item carousel__item--mobile-in-1 carousel__item--tablet-in-2 carousel__item--desktop-in-3'>
          <div class='demo-content'>
            g
          </div>
        </div>
      </div>
    </div>
  </div>
</div>