.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.carousel-template {
    position: relative;
    display: grid;
    grid-template-areas: ". header ." "prev slides next" ". pagination .";
    grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 10px;
	--accent-color: #fafafa;
	--slide-offset: 150%;
	--non-focus-opacity: 0;
	overflow: hidden;
}

.carousel-template.hero {
	grid-template-areas: 
		". prev header next ."
        ". . pagination . .";
	grid-template-columns: 0 auto 1fr auto 0;
	grid-template-rows: 1fr auto 0;
}

.carousel-template>header {
	grid-area: header;
	text-align: center;
}

.carousel-template.hero>header>h2 {
	font-size: 2.5rem;
}

.carousel-template>.crsl-prev-btn {
	grid-area: prev;
}

.carousel-template>.crsl-next-btn {
	grid-area: next;
}

.carousel-template>button {
	line-height: 0;
	border-radius: 50%;
	padding: 10px;
	background-color: var(--accent-color);
	position: relative;
	z-index: 10;
}

.carousel-template>button>span {
	color: var(--button-icon-color);
}

.carousel-template>.crsl-slides {
	grid-area: slides;
	width: 100%;
	height: 100%;
	max-height: 90vh;
	position: relative;
}

.carousel-template>.crsl-slides.hero {
	grid-area: unset;
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	z-index: -1;
}

.crsl-slides>* {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

.carousel-template .crsl-pagination {
	grid-area: pagination;
	display: flex;
	justify-content: center;
	gap: 1vmax;
}


.carousel-template .crsl-pagination-dot {
	border-radius: 50%;
	border: 2px solid var(--accent-color);
	width: clamp(10px, 2vmin, 40px);
	height: clamp(10px, 2vmin, 40px);
}
.crsl-pagination-dot.active-crsl-slide {
	background-color: var(--accent-color);
}


/* --- Slides Animation --- */

.crsl-slides > * {transition: .8s; left: 50%;}
.crsl-slides > :first-child {transform: translateX(calc(-1 * var(--slide-offset) + -50%)); filter: opacity(calc(var(--non-focus-opacity)));}
.crsl-slides > :nth-child(2) {transform: translateX(-50%); filter: opacity(1); pointer-events: all;}
/*.crsl-slides > :nth-child(2):hover {transform: translateX(0%) scale(1.02);}*/
.crsl-slides > :nth-child(3) {transform: translateX(calc(var(--slide-offset) + -50%)); filter: opacity(calc(var(--non-focus-opacity)));}
.crsl-slides > :nth-child(n + 4) {transform: translateX(calc(2 * var(--slide-offset))); filter: opacity(0); visibility: none;}


.placeholder {border: 3px solid #000;}










/* --- Featured Carousel Styles --- */

#featuredTeachersCarousel * {float: unset;}
#featuredTeachersCarousel {position: relative; display: grid; grid-template-areas: "prev slides next" ". pagination ."; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;}
	/* Slides Animation */
#featuredTeachersCarouselSlides {width: 80%; aspect-ratio: 3 / 2; max-height: 80vh; position: relative; left: 50%; transform: translateX(-50%);}
#featuredTeachersCarouselSlides > * {transition: .8s;}
#featuredTeachersCarouselSlides > .teacherSlide:first-child {transform: translateX(-200%); filter: opacity(0);}
#featuredTeachersCarouselSlides > .teacherSlide:nth-child(2) {transform: translateX(-50%); filter: opacity(1); pointer-events: all;}
#featuredTeachersCarouselSlides > .teacherSlide:nth-child(2):hover {transform: translateX(-50%) scale(1.02);}
#featuredTeachersCarouselSlides > .teacherSlide:nth-child(3) {transform: translateX(150%); filter: opacity(1);}
#featuredTeachersCarouselSlides > .teacherSlide:nth-child(n + 3) {transform: translateX(150%); filter: opacity(0); visibility: none;}
	/* Slides Styling */
#featuredTeachersCarousel .teacherSlide {pointer-events: none; height: 100%; width: 100%; display: grid; grid-template-areas: "info img"; grid-template-columns: 1fr 1fr; gap: 20px; border: 4px solid #2fb67c; border-radius: 20px; padding: 20px; box-sizing: border-box; position: absolute; top: 0; left: 50%;}
#featuredTeachersCarousel .teacherSlide:hover {cursor: pointer;}
#featuredTeachersCarousel * {margin: 0;}
#featuredTeachersCarousel h2 {color: #2fb67c; font-size: 40px;}
#featuredTeachersCarousel h3 {font-size: 30px;}
#featuredTeachersCarousel .infoSection {display: flex; flex-direction: column; grid-area: info;}
#featuredTeachersCarousel .reviewStars {background-image: linear-gradient(to right, #F8B703, #F8B703 40%, transparent 40%); -webkit-background-clip: text; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #F8B703;}
#featuredTeachersCarousel .description {margin-top: 20px;}
#featuredTeachersCarousel .imgSection {border-radius: 10px; overflow: hidden; grid-area: img;}
#featuredTeachersCarousel .imgSection img {object-fit: cover; height: 100%; width: 100%;}
	/* Buttons and Pagination */
#featuredTeachersCarousel .carouselBtn {width: fit-content; height: fit-content; padding: .75rem; border-radius: 50%; background-color: #2fb67c; color: #fff; line-height: 0; z-index: 10; -webkit-user-select: none;}
#featuredTeachersCarousel .pagination-dots {grid-area: pagination; display: flex; justify-content: center; gap: 10px;}
#featuredTeachersCarousel .pagination-dots > div {width: 20px; height: 20px; border: 2px solid #2fb67c; border-radius: 50%;}
#featuredTeachersCarousel .pagination-dots > *[data-active="true"] {background-color: #2fb67c;}

@media only screen and (min-width:1400px) {
	#featuredTeachersCarouselSlides {max-height: 50vh;}
}

@media only screen and (max-width:820px) {
	#featuredTeachersCarouselSlides {aspect-ratio: 2 / 3; width: 100%;}
	#featuredTeachersCarousel .teacherSlide {grid-template-areas: "img" "info"; grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 10px; border-radius: 10px; padding: 10px;}
	#featuredTeachersCarouselSlides h2 {font-size: 28px;}
	#featuredTeachersCarouselSlides h3 {font-size: 20px;}
	#featuredTeachersCarouselSlides .description {display: none;}
	#featuredTeachersCarouselSlides .material-symbols-outlined {font-size: 18px;}
}

@media only screen and (max-width:400px) {
	#featuredTeachersCarousel {grid-template-areas: "slides slides slides" "prev pagination next";}
	#featuredTeachersCarousel .pagination-dots {gap: 3px;}
}