/* All carousel styling can be found here */
.carousel {
	text-align: center;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	height: 500px;
}
.carousel img{
	width: 300px;
	justify-self: center;
}
.carousel span {
  align-self: center;
}
.image-tracker, .carousel-note{
	grid-column: 2;
}
.carousel>.next,
.carousel>.prev {
	background-color: var(--yellow);
	border-radius: 50%;
	color: var(--almost-black);
	display: inline-block;
  font-size: 25px;
  font-weight: bold;
  width: 40px;
	height: 40px;
}
.carousel>.next,
.carousel>.prev,
.image-tracker>span:hover{
	cursor: pointer;
}
.image-tracker {
	display: none;
	color: #dddddd;
	font-size: var(--h2-font-size);
}
.image-tracker>span.active {
	color: var(--almost-black);
}