/* Necessary Embla styling */
.embla {
	overflow: hidden;
	cursor: grab;
	--slide-size: 70%;
	width: 100%;
	position: relative;
    border-radius: 0.5rem;
}

.embla__container {
	display: flex;
	touch-action: pan-y pinch-zoom;
}

.embla__slide {
	flex: 0 0 var(--slide-size);
	min-width: 0;
	transform: translate3d(0, 0, 0);
	overflow: hidden;
	height: 20rem;
}
.embla__slide:not(.is-snapped) img {
	opacity: 0.5;
	scale: 0.8;
}

/* Carousel buttons (small) */
.embla__slide a::after {
	content: url(/media/icons/external.svg);
	scale: 0.6;
	width: 5px;
	height: 0;
	margin-left: 1px;
}

.embla__slide a {
	justify-content: center;
	display: flex;
	width: 100%;
	height: 100%;
}

/* Embla left/right arrows */
button {
    position: absolute;
    top: 50%;
    background: transparent;
	cursor: pointer;
    border: 0;
}

button.embla__next { right: -3rem; }
button.embla__prev { left: -3rem; }
@media (max-width: 56rem) {
	button.embla__next { right: 3rem; }
	button.embla__prev { left: 3rem; }
}

.embla__slide img {
	height: 20rem;
	object-fit: cover;
    width: 100%;
    border-radius: 0.5rem;
	transition: opacity 0.5s var(--ease), scale 0.5s var(--ease);
}

/* Info section */
.projectInfo {
	text-align: center;
    margin-top: 1rem;
}
.projectInfo h2 {
	font-family: var(--headerFont);
    font-size: 2rem;
}