/* Modify grab cursor on slider */

.swiper {
	--cursor-grab: url('data:image/svg+xml,<svg fill="none" height="112" viewBox="0 0 112 112" width="112" xmlns="http://www.w3.org/2000/svg"><rect fill="%23008436" height="112" rx="56" width="112"/><g stroke="%23ffce18" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"><path d="m76 74 18-18-18-18"/><path d="m36 38-18 18 18 18"/></g></svg>') 56 56, grab;
}

/* Remove thumbnail colorful backgrounds */

.swiper--thumbnails .swiper-slide .slide-body {
	margin-right: 0;
}

.swiper--thumbnails .swiper-slide .slide-body::before {
	display: none;	
}

.swiper--thumbnails .swiper-slide .slide-body .button-rounded {
	font-size: clamp(24px, 2.77vw, 40px);
}

/* Change font for slide captions */

.slide-caption .field--type-text-long {
	font: 400 16px 'Sequel-Neue', sans-serif;
}

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

	/* Restyle pagination  */
	
	.swiper--thumbnails .swiper-button-prev::after, .swiper-rtl .swiper-button-next::after,
	.swiper--thumbnails .swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
		content: none;
	}
	
	.swiper .swiper-button-prev,
	.swiper .swiper-button-next {
		font-size: clamp(32px, 4vw, 56px);
		padding: 0.6em;
		background-color: white;
		border-radius: 50%;
		transition: 
			background-color 300ms ease-in-out,
			color 300ms ease-in-out;
		color: var(--color-mid-green);
		display: flex;
		
	}
		
	.swiper .swiper-button-prev [class^="icon-"],
	.swiper .swiper-button-next [class^="icon-"] {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.swiper .swiper-button-prev:hover,
	.swiper .swiper-button-next:hover {
		background-color: var(--color-yellow);
		color: white;
	}
	
	.slider-pager {
		width: calc(33.33% - 2 * 24px);
		justify-content: space-between;
	}
	
	/* Change slide captions font */
	
	.slide-caption .field--type-text-long {
		font-size: clamp(16px, 1.5vw, 24px);
	}
	
}