/*
CREDITS:
	CSS Taken from: https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
	Author: Jennifer Wjertzoch (https://wjertzochjennifer.medium.com)
	CodePen: https://codepen.io/jwjertzoch/pen/JjyGeRy
*/

.carousel {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.slides {
  width: 100%;
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.slides::-webkit-scrollbar {
  display: none;
}

.slides-item {
	max-height: 75vh;
  align-items: center;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  margin: 0 1rem;
  position: relative;
  scroll-snap-align: start;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .5s;
  width: 100%;
}

.slides-item img {
	max-height: 75vh;
}

.carousel__nav {
  padding: 1.25rem .5rem;
}

.slider-nav {
  align-items: center;
  background-color: #ddd;
  border-radius: 50%;
  color: #000;
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  padding: .5rem;
  position: relative;
  text-decoration: none;
  width: 1.5rem;
}

.slider-nav:hover,
.slider-nav:active {
  background-color: #000;
  color: #fff;
}