Three

Goes from one carousel__item on small screens to three carousel__item's on larger screens.

Compared to a regular grid, it is important that .carousel--three is the direct parent of carousel__item.

Carousel column 1. Example text to show how the coluns breaks on smaller screens.
Carousel column 2. Example text to show how the coluns breaks on smaller screens.
Carousel column 3. Example text to show how the coluns breaks on smaller screens.
Carousel column 4. Example text to show how the coluns breaks on smaller screens.
<div class="carousel--three">
  <div class="carousel__item">Carousel column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="carousel__item">Carousel column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="carousel__item">Carousel column 3. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="carousel__item">Carousel column 4. Example text to show how the coluns breaks on smaller screens.</div>
</div>