.novi-instagram-feed__grid {
	display: grid;
	grid-template-columns: repeat(var(--novi-columns, 3), minmax(0, 1fr));
	gap: var(--novi-gap-desktop, 20px);
}

.novi-instagram-feed__card,
.novi-instagram-feed__media,
.novi-instagram-feed__image {
	display: block;
}

.novi-instagram-feed__card {
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.novi-instagram-feed__media {
	overflow: hidden;
	aspect-ratio: var(--novi-image-ratio, auto);
	height: var(--novi-image-height, auto);
	border-radius: var(--novi-image-radius, 0);
}

.novi-instagram-feed__image {
	width: 100%;
	height: 100%;
	object-fit: var(--novi-image-fit, cover);
}

.novi-instagram-feed__caption {
	display: block;
}

.novi-instagram-feed__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.novi-instagram-feed__viewport::-webkit-scrollbar { display: none; }

.novi-instagram-feed__track {
	display: flex;
	gap: var(--novi-gap-desktop, 20px);
}

.novi-instagram-feed__slide {
	flex: 0 0 calc((100% - (var(--novi-slides-desktop, 4) - 1) * var(--novi-gap-desktop, 20px)) / var(--novi-slides-desktop, 4));
	scroll-snap-align: start;
}

.novi-instagram-feed__stage {
	position: relative;
}

.novi-instagram-feed__navigation {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.novi-instagram-feed__arrow {
	display: inline-grid;
	position: static !important;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--novi-arrow-background, var(--wd-primary-color, var(--e-global-color-primary, #376f60)));
	color: var(--novi-arrow-color, #fff);
	width: var(--novi-arrow-size, 44px);
	height: var(--novi-arrow-size, 44px);
	transform: none !important;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}

.novi-instagram-feed__arrow::after {
	display: none;
}

.novi-instagram-feed__arrow svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.novi-instagram-feed__arrow:hover,
.novi-instagram-feed__arrow:focus-visible {
	background: var(--wd-alternative-color, var(--e-global-color-secondary, #24594b));
}

.novi-instagram-feed__arrow:disabled {
	opacity: .45;
	cursor: default;
}

.novi-instagram-feed__navigation--overlay {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	left: 0;
	justify-content: space-between;
	margin: 0;
	padding: 0 12px;
	transform: translateY(-50%);
	pointer-events: none;
}

.novi-instagram-feed__navigation--overlay .novi-instagram-feed__arrow {
	pointer-events: auto;
}

.novi-instagram-feed__pagination {
	position: static;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	text-align: initial;
}

.novi-instagram-feed__pagination--overlay {
	position: absolute;
	z-index: 1;
	bottom: 12px;
	left: 0;
	margin: 0;
}

.novi-instagram-feed__pagination .novi-instagram-feed__bullet {
	margin: 0;
	width: var(--novi-pagination-size, 8px);
	height: var(--novi-pagination-size, 8px);
	border: 0;
	border-radius: 50%;
	background-color: var(--novi-pagination-color, var(--wd-text-color, #222));
	opacity: .25;
}

.novi-instagram-feed__pagination .novi-instagram-feed__bullet.is-active {
	background-color: var(--novi-pagination-active-color, var(--novi-pagination-color, var(--wd-text-color, #222)));
	opacity: 1;
}

@media (max-width: 1024px) {
	.novi-instagram-feed__grid { gap: var(--novi-gap-tablet, var(--novi-gap-desktop, 20px)); }
	.novi-instagram-feed__track { gap: var(--novi-gap-tablet, var(--novi-gap-desktop, 20px)); }
	.novi-instagram-feed__slide { flex-basis: calc((100% - (var(--novi-slides-tablet, 2) - 1) * var(--novi-gap-tablet, var(--novi-gap-desktop, 20px))) / var(--novi-slides-tablet, 2)); }
}

@media (max-width: 767px) {
	.novi-instagram-feed__grid { gap: var(--novi-gap-mobile, var(--novi-gap-tablet, 12px)); }
	.novi-instagram-feed__track { gap: var(--novi-gap-mobile, var(--novi-gap-tablet, 12px)); }
	.novi-instagram-feed__slide { flex-basis: calc((100% - (var(--novi-slides-mobile, 1) - 1) * var(--novi-gap-mobile, var(--novi-gap-tablet, 12px))) / var(--novi-slides-mobile, 1)); }
}