/* external css: flickity.css */

* { box-sizing: border-box; }


.carousel {
  background: white;
  margin-top: 9vh;
  height: 20vh;
  margin-bottom: 7vh;
}

.carousel-cell {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

.carousel.is-fullscreen .carousel-cell {
    z-index: 100;
    height: 95%;
  }

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

@media screen and (width: 768px){
  .carousel {
    background: white;
    margin-top: 2vh;
    height: 30vh;
    margin-bottom: 1vh;
  }


}

@media screen and (min-width: 1024px){

  .carousel {
    background: white;
    margin-top: 2vh;
    height: 80vh;
    
  }
  
  .carousel-cell {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    border-radius: 5px;
    counter-increment: gallery-cell;
  }
  
  .carousel.is-fullscreen .carousel-cell {
      z-index: 100;
      height: 95%;
    }
  
  /* cell number */
  .carousel-cell:before {
    display: block;
    text-align: center;
    content: counter(gallery-cell);
    line-height: 200px;
    font-size: 80px;
    color: white;
  }
  
  
}