/* Experiences Grid */
.experiences-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 1rem;
}
/* Experience Intro */
.experiences-grid .experiences-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Experience Items Styling */
.experiences-grid .experience-item {
	display: flex;
	flex-direction: column;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}
.experiences-grid .experience-item-promotion-banner {
    position: absolute;
    transform: rotate(45deg);
    display: inline-block;
    background-color: var(--eloria-petrol-2);
    width: 12rem;
    text-align: center;
    top: 2rem;
    right: -3rem;
    font-size: 1rem;
    padding: 0.5rem 0;
    box-shadow: -8px 8px 15px 1px rgba(0, 0, 0, 0.2);
    outline: 2px solid var(--eloria-gold);
}
.experiences-grid .experience-item .experience-title {
	color: var(--second-font-color);
	font-size: 1.4rem;
}
.experiences-grid .experience-item .experience-description {
	line-height: 1.4;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
}
.experiences-grid .experience-item .experience-difficulty {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.experiences-grid .experience-item .elo-button-main a {
	max-width: 100%;
	min-width: unset;
	width: 100%;
}
.experiences-grid .experience-item .elo-button-main:last-of-type {
	margin-top: auto;
}
.experiences-grid .secondary.dark .bk-next-slot button {
	color: var(--second-font-color);
	width: 100%;
}
.experiences-grid .secondary.dark .bk-next-slot button:hover {
	color: var(--main-font-color);
}
.experiences-grid .experience-item img {
	max-width: 100%;
	width: 100%;
	margin-bottom: 0.5rem;
}
/* Item meta */
.experiences-grid .experience-meta {
	color: var(--second-font-color);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.experiences-grid .experience-meta > p {
	display: flex;
    flex-direction: row;
    align-items: center;
	margin-bottom: 0;
}
.experiences-grid .experience-meta > p::before {
	width: 1.7rem;
	height: 1.7rem;
	display: block;
	margin-right: 0.5rem;
	filter: brightness(0%);
}
.experiences-grid .experience-meta .experiece-category::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M32 229.5V80c0-8.8 7.2-16 16-16H197.5c8.5 0 16.6 3.4 22.6 9.4l176 176c12.5 12.5 12.5 32.8 0 45.3L262.6 428.1c-12.5 12.5-32.8 12.5-45.3 0l-176-176L18.7 274.7l22.6-22.6c-6-6-9.4-14.1-9.4-22.6zm-32 0c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80V229.5zM112 168a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/svg%3E");
}
.experiences-grid .experience-meta .experiece-duration::before {
	content: url("/app/themes/eloria/placeholder/time.svg");
}
.experiences-grid .experience-meta .experiece-players::before {
	content: url("/app/themes/eloria/placeholder/usercount.svg");
}
.experiences-grid .experience-meta .experiece-age::before {
	content: url("/app/themes/eloria/placeholder/age.svg");
}
/* Experiences Ad Section */
.experiences-grid .experiences-ad {
	order:999;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Responsive */
@media screen and ( min-width: 768px ) {
}
@media screen and ( min-width: 992px ) {
	.experiences-grid .experience-item {
		--main-font-size: 1rem;
	}
}
@media screen and ( min-width: 1629px ) {
	/* Experience Grid */
	.experiences-grid {
		/* display: grid; */
		/* grid-template-columns: repeat(4, minmax(250px, 1fr)); */
		/* grid-template-areas: 
			"intro item1 item2 item3"
			"item4 item5 item6 ad"; */
		gap: 2em;
	}
	/* Experience Item */
	.experiences-grid .experience-item:hover {
		transform: scale(1.05);
	}
	.experiences-grid .experience-item:nth-of-type(-n+2) {
		order: -1;
	}
	.experiences-grid .experience-item .elo-button-main {
		margin-top: auto;
	}

	/* Experience Intro */
	.experiences-grid .experiences-intro {
		/* grid-area: intro; */
		grid-column: span 2 / span 2;
	}
	/* Experiences Ad Section */
	.experiences-grid .experiences-ad {
		/* grid-area: ad; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		order: 0;
	}
	.experiences-grid .experiences-ad h3 {
		font-size: 3rem;
	}
}