.swiper {
	--swiper-theme-color: var(--color-yellow);
	--swiper-pagination-bullet-width: max-content;
	--swiper-pagination-bullet-height: 36px;
	--swiper-pagination-bullet-border-radius: 0;
	--swiper-pagination-bullet-inactive-color: none;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 4px;
	--swiper-pagination-color: none;
	--swiper-scrollbar-drag-bg-color: var(--color-yellow);
	--swiper-shift: 8px;
	--cursor-grab: url('data:image/svg+xml,<svg fill="none" height="78" viewBox="0 0 78 78" width="78" xmlns="http://www.w3.org/2000/svg"><rect fill="%23ffce18" height="78" rx="39" width="78"/><g stroke="%23008436" stroke-linecap="square" stroke-linejoin="round" stroke-width="3.72152"><path d="m27.0312 29.5469-9.75 9.5 9.75 9.5"/><path d="m50.9609 48.5469 9.75-9.5-9.75-9.5"/></g></svg>') 39 39, grab;
	--scrollbar-margin-top: 2.125rem;
	
	width: 100%;
	height: 100%;
	z-index: 0;
}

.swiper-slide picture {
	display: block;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper--banner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.swiper--banner .swiper-slide {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 var(--pad);
}

.swiper--banner .swiper-slide picture,
.swiper--banner .swiper-slide video {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.swiper--banner .swiper-slide video {
	z-index: -1;
	object-fit: cover;
	pointer-events: none;
}

.swiper--banner .swiper-slide picture {
	z-index: -2;
}

.swiper--banner .swiper-pagination-bullet {
	display: inline-block;
	font: 400 0.875rem Sequel-Neue, sans-serif;
	padding: 0 3px;
	color: white;
	border-right: 3px solid white;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.swiper--banner .swiper-pagination-bullet:first-of-type {
	text-align: left;
}

.swiper--banner .swiper-pagination-bullet:last-of-type {
	text-align: right;
}

.swiper--banner .swiper-pagination-bullet:not(:first-of-type):not(:last-of-type) {
	color: transparent;
}

.swiper--banner .swiper-pagination-bullet-active {
	color: var(--swiper-theme-color);
	border-right: 5px solid var(--swiper-theme-color);
}

.swiper--banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper--banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: var(--swiper-pagination-bullet-horizontal-gap,4px) 0;
}

.swiper--banner .swiper-horizontal > .swiper-pagination-bullets,
.swiper--banner .swiper-pagination-bullets.swiper-pagination-horizontal {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: var(--pad);
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.swiper--banner .header-wrapper {
	width: calc(100% - 0.875rem - 6px - var(--swiper-pagination-bullet-horizontal-gap,4px));
}

.swiper--thumbnails:not(.swiper-initialized) {
	visibility: hidden;
}

.swiper--thumbnails:not(.field) {
	width: calc(100% + var(--pad));
}

.swiper:has(.swiper-scrollbar:not(:empty)) {
	padding-bottom: var(--scrollbar-margin-top);
}

.swiper.first-slider:has(.swiper-scrollbar:not(:empty)) {
	padding-bottom: 3.2rem;
	--swiper-scrollbar-bottom: 22px;
}

.swiper--thumbnails .swiper-slide {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.swiper--thumbnails .swiper-slide .slide-body {
	aspect-ratio: 2 / 3;
	position: relative;
	z-index: 0;
	margin-right: var(--swiper-shift);
	margin-bottom: var(--swiper-shift);
}

.swiper--thumbnails .swiper-slide .slide-body::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	right: calc(var(--swiper-shift) * -1);
	bottom: calc(var(--swiper-shift) * -1);
	z-index: -1;	
}

.swiper--thumbnails .swiper-slide--article .slide-body::before  {
	background-color: var(--color-light-green);
}

.swiper--thumbnails .swiper-slide--recipe .slide-body::before  {
	background-color: var(--color-yellow);
}

.swiper--thumbnails .swiper-slide--news .slide-body::before  {
	background-color: var(--color-orange);
}

.swiper--thumbnails .swiper-slide .slide-body img,
.swiper--thumbnails .swiper-slide .slide-body::before {
	border-radius: 8px;
}

.swiper--thumbnails .swiper-slide .slide-body .button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 300ms ease-in-out;
	opacity: 0;
}

.swiper--thumbnails .slide-caption {
	text-align: left;
}

.swiper .swiper-scrollbar-horizontal {
	width: calc(100% - var(--pad) - 2 * var(--swiper-scrollbar-sides-offset,1%));
}

.swiper.first-slider .swiper-scrollbar-horizontal {
	width: calc(66.66% - var(--pad) - 2 * var(--swiper-scrollbar-sides-offset,1%));
}

.swiper--thumbnails .swiper-pagination {
	--swiper-pagination-bullet-horizontal-gap: 10px;
	font: 400 0.75rem Sequel-Neue, sans-serif;
}

.swiper--thumbnails .swiper-pagination-bullet {
	height: auto;
	display: inline-flex;
	flex-direction: column;
}

.swiper--thumbnails .swiper-pagination-bullet::before {
	content: '';
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	border-radius: 50%;
	margin-bottom: 1em;
}

.swiper--thumbnails .swiper-pagination-bullet-active::before {
	background-color: var(--swiper-theme-color);
}

.swiper.first-slider::before  {
	content: '';
	position: absolute;
	bottom: 0;
	right: 20px;
	height: 32px;
	aspect-ratio: 2 / 1;
	background: url('data:image/svg+xml,<svg enable-background="new 0 0 44 26.6" viewBox="0 0 44 26.6" xmlns="http://www.w3.org/2000/svg"><g fill="%23ffce18"><path d="m44 12.5c0-1.5-1.2-2.8-2.7-2.8-.3 0-.6.1-.9.2 0-1.4-1.2-2.5-2.7-2.5-.4 0-.9.1-1.2.3-.5-.8-1.3-1.3-2.3-1.3-.3 0-.6.1-.9.2v-4c0-1.4-1.2-2.6-2.7-2.6s-2.7 1.2-2.7 2.6v10.6c-1.5.1-2.7.9-3.1 2.3-.4 1.8-.3 3.8.4 5.9.6 1.6 1.8 3.3 3.9 5 .2.1.4.2.6.2.3 0 .5-.1.7-.3.3-.4.3-.9-.1-1.2-1.8-1.5-3-2.9-3.4-4.2-.6-1.9-.8-3.5-.4-5 .2-.6.7-.9 1.3-.9v1.6c0 .5.4.9.9.9s.9-.4.9-.9v-14c0-.5.4-.8.9-.8s.9.4.9.8v9.9c0 .5.4.9.9.9s.9-.4.9-.9v-3.6c0-.5.4-.8.9-.8s.9.4.9.8v1 2.5.5c0 .5.4.9.9.9s.9-.4.9-.9v-.5-2.4c0-.5.4-.8.9-.8s.9.4.9.8v3.7c0 .5.4.9.9.9s.9-.4.9-.9v-1.2c0-.6.4-1.1.9-1.1s.9.5.9 1.1v.1c0 .1.5 7.5-1.9 12.7-.2.4 0 1 .4 1.2.1.1.2.1.4.1.3 0 .7-.2.8-.5 2.6-5.6 2.1-13 2.1-13.6z"/><path d="m24.2 4.2c0-.1 0-.1 0 0 0-.1 0-.1.1-.2 0-.1 0-.1 0-.2s0-.1 0-.2v-.1s0 0 0-.1c0 0 0-.1-.1-.1s-.1-.1-.1-.1l-2-1.9c-.4-.3-.9-.3-1.3 0-.3.3-.4.9 0 1.2l.5.4h-18.4c-.5 0-.9.4-.9.9s.4.9.9.9h18.4l-.5.5c-.4.3-.4.9 0 1.2.2.2.4.3.6.3s.5-.1.6-.3l2-1.9s.1-.1.1-.1c.1-.2.1-.2.1-.2z"/><path d="m21.4 8.1h-18.3l.5-.5c.4-.3.4-.9 0-1.2s-.9-.3-1.3 0l-2 1.9s-.1.1-.1.1 0 .1-.1.1v.1.1c-.1.2-.1.2-.1.3s0 .1 0 .2v.1.1s0 .1.1.1v.1s.1.1.1.1l2 1.9c.2.2.4.3.6.3s.5-.1.6-.3c.4-.3.4-.9 0-1.2l-.3-.5h18.4c.5 0 .9-.4.9-.9s-.5-.9-1-.9z"/></g></svg>') no-repeat center / contain;
}

.swiper > .swiper-button-prev,
.swiper > .swiper-button-next {
	--swiper-navigation-sides-offset: 0;
	--swiper-navigation-color: white;
	--swiper-navigation-size: 20px;
	background-color: rgb(0, 0, 0, 0.8);
	width: 32px;
	height: 64px;
	top: calc((100% - var(--scrollbar-margin-top))/2);
	transform: translateY(-50%);
	margin-top: 0;
}

.slider-pager {
	position: absolute;
	bottom: var(--swiper-pagination-bottom,8px);
  	top: var(--swiper-pagination-top,auto);
	left: 50%;
  	transform: translateX(-50%);
	display: flex;
	gap: calc(var(--swiper-pagination-bullet-horizontal-gap) * 2);
}

.slider-pager > .swiper-button-prev {
	order: 1;
}

.slider-pager > .swiper-pagination {
	order: 2;
}

.slider-pager > .swiper-button-next {
	order: 3;
}

.slider-pager > .swiper-pagination,
.slider-pager > .swiper-button-prev,
.slider-pager > .swiper-button-next {
	position: static;
}

.slider-pager  > .swiper-button-prev,
.slider-pager  > .swiper-button-next {
	--swiper-navigation-color: white;
	--swiper-navigation-size: 1em;
	margin-top: 0;
	height: var(--swiper-pagination-bullet-height);
}

@media screen and (min-width: 768px) {
  /* wider layout styles here */
  
  	.swiper {
		--scrollbar-margin-top: 3.25rem;
		--swiper-shift: 14px;	
	}

	.swiper--banner .swiper-wrapper {
		cursor: var(--cursor-grab);
	}

	.swiper--thumbnails {
		width: 100% !important;
	}

	.swiper--thumbnails .swiper-slide .slide-body {
		transition: transform 300ms ease-in-out;
	}
	
	.swiper--thumbnails .swiper-slide .slide-body::before {
		transition: right 300ms ease-in-out, bottom 300ms ease-in-out, width 300ms ease-in-out;
		
	}

	.swiper--thumbnails .swiper-slide .slide-body:hover {
		transform: translateY(calc(var(--swiper-shift)/2));
	}

	.swiper--thumbnails .swiper-slide .slide-body:hover::before {
		right: calc(var(--swiper-shift)/-2);
		bottom: calc(var(--swiper-shift)/-2);
		width: 94%;
	}

	.swiper--thumbnails .swiper-slide:hover .slide-body .button {
		opacity: 1;
	}

	.swiper--thumbnails:has(.swiper-pagination:not(:empty)) {
		padding-bottom: 7.2rem !important;
	}

	.swiper.first-slider::before {
		content: none;
	}

	.swiper:has(.swiper-scrollbar:not(:empty)) .swiper-scrollbar {
		max-width: 450px;
		left: 50% !important;
		transform: translateX(-50%);
	}

	.swiper:has(.swiper-scrollbar:not(:empty):not(.swiper-scrollbar-disabled)):not(:has(.swiper-button-prev)) {
		cursor: var(--cursor-grab);
		user-select: none;
	}
}