.learnpress-package {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin: 0;

	&__items {
		border: 1px solid var(--lp-package-border-color, rgba(0, 0, 0, 0.1));
		transition: all .3s;

		&:hover {
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1)
		}
	}

	&__image {
		display: flex;
		flex-direction: column;

		& img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		&__link {
			position: relative;
			display: inline-block;
			width: 100%;
			text-decoration: none;
			border: 1px solid rgba(0, 0, 0, 0.13);

			img {
				height: 100% !important;
			}
		}
	}

	&__meta {
		width: 100%;
		padding: var(--lp-package-meta-padding, 24px 20px);
	}

	&__title {
		margin-bottom: var(--lp-package-spacing-bottom, 15px);
		clear: both;

		a {
			font-weight: 700;
			font-size: 1.25rem;
			line-height: 1.3;
			display: block;
			transition: 0.3s;
			text-decoration: none;

			&:hover {
				color: var(--lp-primary-color);
			}
		}
	}

	&__count-courses {
		margin-bottom: var(--lp-package-spacing-bottom, 10px);
	}

	&__view-detail>a {
		font-size: var(--lp-package-content-font-size-medium, 0.875rem);
		font-weight: var(--lp-package-content-font-weight, 700);
		text-decoration: none;
		text-transform: capitalize;
		transition: 0.3s;
		display: block;
		width: max-content;

		&:hover {
			color: var(--lp-primary-color);
			text-decoration: underline;
		}
	}

	&s__ordering {
		margin-right: 20px;
		margin-left: 0;

		@media (max-width: 400px) {
			margin-bottom: 15px;
		}

		select {
			padding: 10px 40px 10px 10px;
			border: 1px solid var(--lp-package-border-color, rgba(0, 0, 0, 0.2));
			transition: (0.3s);
			cursor: pointer;
		}
	}
}

.lp-packages-elementor {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		grid-template-columns: var(--lp-packages-columns, repeat(3, 1fr));
		row-gap: var(--lp-packages-row-gap, 30px);
		column-gap: var(--lp-packages-column-gap, 30px);

		&.lp-upsell-glider {
			display: flex;
			margin: 0 -15px;
			-ms-overflow-style: none;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}

	.learnpress-package__items {
		box-shadow: none;
	}

	&.lp-upsell-glider-contain {
		position: relative;
		overflow: hidden;
		padding-bottom: 60px;
	}

	.progress-bar {
		position: absolute;
		bottom: 24px;
		left: 120px;
		height: 2px;
		background-color: #E2E0DB;
		width: calc(100% - 120px);
		transition: width 0.3s ease;

		&__inner {
			width: 0%;
			height: 2px;
			background-color: var(--lp-primary-color);
		}
	}

	.glider-next {
		bottom: 0;
		top: auto;
		left: 60px;
		right: auto;
	}

	.glider-prev {
		bottom: 0;
		top: auto;
		left: 0;
		right: auto;
	}

	.glider-next,
	.glider-prev {
		width: 48px;
		height: 48px;
		font-size: 20px;
		border-radius: 50%;
		background-color: #F1F2F8;
		color: #1C1C1B;

		&:focus {
			color: #1C1C1B;
		}

		&:hover {
			color: var(--lp-primary-color);
		}
	}

	.glider-track {
		align-items: baseline;
		width: 100% !important;
	}

	.glider-slide {
		flex: 0 0 33.3334%;
		box-sizing: border-box;
		padding: 0 15px;

		@media (max-width: 1024px) {
			flex: 0 0 50%;
		}

		@media (max-width: 600px) {
			flex: 0 0 100%;
		}
	}
}

@media (max-width: 991px) {

	.learnpress-packages {

		&__archive>li {
			max-width: 50%;
		}
	}
}

@media (max-width: 767px) {

	.learnpress-package {
		&s__archive>li {
			max-width: 100%;
		}

		&__meta {
			padding: 15px;
		}

	}
}