.wrapper {
	display: block;
	margin-inline: auto;
	width: 100%;
	max-width: 1280px;
	padding-inline: 20px;
}

/* Base Template */

.base-template__wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.base-template__content {
	position: relative;
	z-index: 1;
}

.base-template__heading {
	flex: 1;
	z-index: 1;
}

@media screen and (max-width: 767.9px) {
	.base-template__heading {
		align-items: center;
	}
}

.base-template__heading .base-template__title,
.base-template__heading .base-template__text {
	text-align: left;
}

@media screen and (max-width: 767.9px) {
	.base-template__heading .base-template__title,
	.base-template__heading .base-template__text {
		text-align: center;
	}
}

.base-template__title {
	display: block;
	margin: 0;
	margin-bottom: 30px;
	font-family: var(--font-oswald);
	font-weight: 400;
	font-size: 48px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.15;
	transition: color 0.4s ease;
}

.base-template__text {
	display: block;
	margin-bottom: 80px;
	font-weight: 300;
	text-align: center;
	line-height: 1.35;
	color: var(--color-gray-l);
	transition: color 0.4s ease;
}

.base-template__list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 60px 90px;
	max-width: 100%;
	margin-inline: auto;
}

@media screen and (max-width: 767.9px) {
	.base-template__title {
		font-size: 32px;
	}
}







/* Purely from codepen css here */

.base-template__wrapper {
	max-width: 1560px;
}

.base-template__text {
	margin-bottom: 60px;
}

/**
 * Slider Instance
 */

	.swiper {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.emotions-slider {
		--color-gray: #818181;
		--color-gray-dark: #1e1e1e;

		padding-inline: 98px;
		position: relative;
	}

	.emotions-slider__slide {
		display: flex;
		align-items: center;
		min-height: 550px;
	}

	@media screen and (max-width: 767.9px) {
		.emotions-slider {
			padding: 0;
			margin-inline: -20px;
		}
	}

	/**
	 * Slider Navigation
	 */

	.slider-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		translate: 0 -50%;
		z-index: 1;
		pointer-events: none;
	}

	.slider-nav__item {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		width: 48px;
		pointer-events: auto;
		cursor: pointer;
		transition: all 0.3s ease-out;
	}

	.slider-nav__item.disabled {
		cursor: default;
		opacity: 0.5;
	}

	.slider-nav__item path {
		stroke: currentColor;
	}

	@media (hover: hover) and (pointer: fine) {
		.slider-nav__item:not(.disabled):hover {
			color: var(--color-blue);
		}
	}

	@media (hover: none) {
		.slider-nav__item:not(.disabled):active {
			color: var(--color-blue);
		}
	}

	@media screen and (max-width: 767.9px) {
		.slider-nav {
			display: none;
		}
	}

	/**
	 * Slider Pagination
	 */

	.slider-pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
		padding-top: 40px;
	}

	.swiper-pagination-lock {
		display: none !important;
	}

	.slider-pagination__item {
		width: 8px;
		height: 8px;
		border-radius: 99px;
		background: #fff;
		transition: all 0.3s ease-out;
		opacity: 0.2;
	}

	.slider-pagination__item.active {
		width: 30px;
		opacity: 1;
	}

	/**
	 * Slider Item
	 */

	.swiper-slide {
		width: auto;
		height: auto;
	}

	@keyframes btn-arrow-move {
		0% {
			translate: 0;
		}

		100% {
			translate: 100% -100%;
		}
	}

	.emotions-slider-item {
		--border-radius: 10px;

		width: calc(100dvw - 60px);
		max-width: 400px;
		background: var(--color-gray-dark);
		border-radius: var(--border-radius);
		position: relative;
		overflow: hidden;
	}

	.emotions-slider-item__badge {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 4px 10px 4px 5px;
		background: #00000066;
		border-bottom-right-radius: var(--border-radius);
		font-size: 14px;
		line-height: calc(24 / 14);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.emotions-slider-item__badge::before {
		content: "";
		flex-shrink: 0;
		display: block;
		aspect-ratio: 1;
		width: 18px;
		background: url("https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-star.svg")
		center center no-repeat;
		background-size: 100%;
	}

	.emotions-slider-item__image {
		aspect-ratio: 400 / 270;
		overflow: hidden;
	}

	.emotions-slider-item__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.emotions-slider-item__content {
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 30px 20px;
	}

	.emotions-slider-item__header,
	.emotions-slider-item__footer {
		max-height: 50px;
		overflow: hidden;
		transition: max-height 0.6s ease-in;
	}

	.emotions-slider-item__header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20px;
	}

	.emotions-slider-item__price {
		font-weight: 600;
		font-size: 22px;
		line-height: calc(24 / 22);
	}

	.emotions-slider-item__author {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.emotions-slider-item__author-image {
		flex-shrink: 0;
		aspect-ratio: 1;
		width: 20px;
		border-radius: 100%;
		overflow: hidden;
	}

	.emotions-slider-item__author-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		filter: brightness(50%);
	}

	.emotions-slider-item__author-name {
		font-family: var(--font-poppins);
		font-size: 14px;
		line-height: calc(20 / 14);
		color: var(--color-gray);
	}

	.emotions-slider-item__title {
		font-weight: 600;
		font-size: 20px;
		line-height: 1.2;
		margin-bottom: 8px;
	}

	.emotions-slider-item__text {
		font-weight: 300;
		font-size: 16px;
		line-height: 1.5;
		opacity: 0.7;
	}

	.emotions-slider-item__btn {
		display: flex;
		align-items: center;
		gap: 4px;
		font-weight: 500;
		font-size: 18px;
		color: #fff;
		text-decoration: none;
	}

	.emotions-slider-item__btn-icon {
		flex-shrink: 0;
		display: block;
		aspect-ratio: 1;
		width: 24px;
		position: relative;
		overflow: hidden;
	}

	.emotions-slider-item__btn-icon::before,
	.emotions-slider-item__btn-icon::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: url("../images/reshot-icon-arrow-diagonal-down-right.svg")
		center center no-repeat;
		background-size: 100%;
	}

	.emotions-slider-item__btn-icon::after {
		position: absolute;
		top: 100%;
		right: 100%;
	}

	.emotions-slider__slide:not(.swiper-slide-active) .emotions-slider-item__header,
	.emotions-slider__slide:not(.swiper-slide-active)
	.emotions-slider-item__footer {
		max-height: 0;
	}

	@media (hover: hover) and (pointer: fine) {
		.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::before,
		.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::after {
			animation: btn-arrow-move 0.4s ease forwards;
		}
	}

	@media (hover: none) {
		.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::before,
		.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::after {
			animation: btn-arrow-move 0.4s ease forwards;
		}
	}