:root {
	--blue: #b7d8e4;
}

.container {
	margin-bottom: 2rem;
}

.card-wrapper {
	max-width: 1200px;
	margin: 0 60px 35px;
	padding: 20px 10px;
	overflow: hidden;
}

.card-list .card-item {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-list .card-item .card-link {
	user-select: none;
	border: 2px solid transparent;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	transition: 0.2s ease;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 30rem;
	width: 20rem;
	border-radius: 1rem;
	overflow: hidden;
}

.card-list .card-item .card-link:active {
	cursor: grabbing;
}

.card-list .card-link .card-image {
	width: 50%;
	border-radius: 10px;
	object-fit: cover;
	position: absolute;
	bottom: 1rem;
	z-index: 3;
}

.card-wrapper .swiper-pagination-bullet {
	height: 13px;
	width: 13px;
	opacity: 0.5;
	background: #03e8fc;
}

.card-wrapper .swiper-pagination-bullet-active {
	opacity: 1;
}

.card-wrapper .swiper-slide-button {
	color: var(--blue);
	margin-top: -35px;
}

.card-wrapper .swiper-slide-button:hover {
	color: #03e8fc;
}

.card-list .card-item .card-link video {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
}

.play__btn {
	z-index: 2;
	font-size: 2.5rem;
	cursor: pointer;
	color: #03e8fc;
}

.play__btn:hover {
	color: var(--blue);
}

/* Responsive media query code for small screens */
@media (max-width: 768px) {
	.card-wrapper {
		margin: 0 10px 25px;
	}

	.card-wrapper .swiper-slide-button {
		display: none;
	}

	.card-wrapper {
		max-width: 20rem;
		margin: 0 ;
		padding: 0;
		overflow: hidden;
	}

	#card-wrapper1 {
		width: 20rem;
		margin: 0 ;
		padding: 0 0 .5rem 0;
		overflow: hidden;
	}

		#card-wrapper2 {
		width: 20rem;
		margin: 0 ;
		padding: 0 0 .5rem 0;
		overflow: hidden;
	}

	
}

.card-list .card-item .card-link img {
	cursor: pointer;
}

#card-wrapper1{
	display: flex;
	align-items: center;
	justify-content: center;
}

#card-wrapper2{
	display: flex;
	align-items: center;
	justify-content: center;
}

.g_img{
	width: 20rem;
}

.g_img1{
	width: 20rem;
}