/* @dave this seems a little extreme to put here - can you tell me the thinking? why wouldn't we do something like ".if-block-testimonials *" */
* { box-sizing: border-box; }

/* @dave why are we declaring body fonts in blocks? */

body { font-family: sans-serif; }

.carousel {
}

/* @dave are we only using flickety for testimonials?
I'm assuming it becomes our preferred slider js library
and so it doesn't make sense we have all this general
flickity class targeting here, following your block pattern of ibf-blockname classes */

.ibf-testimonials.carousel .carousel-cell {
  width: 66%;
  margin-right: 10px;
	display: flex;
	justify-content: center;
  flex-direction: column;
  padding: 20px 20px;
  align-items: center;
  counter-increment: carousel-cell;
  transition: transform .5s ease-in-out;
}

.ibf-testimonials.carousel .carousel-cell:not(.is-selected) {
  opacity: .4;
  transform: scale(.8);
}

/* cell number */
.ibf-testimonials.carousel .carousel-cell:before {
  display: block;
  text-align: center;
}


.ibf-testimonials.carousel .ibf-avatar {
  margin-bottom: 20px;
  width: 75px;
  height: 75px;
}
.ibf-testimonials.carousel button.flickity-button:focus,
.ibf-testimonials.carousel button.flickity-button:hover,
.ibf-testimonials.carousel button.flickity-button .flickity-button-icon:hover {
  color: #333;
}
.ibf-testimonials.carousel button.flickity-button.flickity-prev-next-button.next {
  padding-left: 15px;
  padding-right: 30px;
}
.ibf-testimonials.carousel button.flickity-button.flickity-prev-next-button.previous {
  padding-right: 15px;
  padding-left: 30px;
}

/* why is there color hardcoded here? */
.ibf-testimonials.carousel .attribution {
  color: rgb(238, 179, 16);
  font-size: 20px;
  font-weight: bold;
}

/* migrate to hardscapes styles */
.ibf-testimonials.carousel .carousel-cell {
  border: 1px solid black;
  background: #fff;
  border-radius: 0;
  padding: 40px 30px 20px;
}