.challenges.linear{
	background-image: linear-gradient(to bottom, #0e4c0e, #093709);
}
.getTheTicket{
	display: inline-block;
	width:100%;
	border-radius: var(--collection-b-radius);
	background-color: var(--style-color);
	padding: 32px 40px;
	margin: 20px 0 0 0;
	position: relative;
	h4{
		color: var(--text-color);
		font-size: var(--big-font-size);
		text-transform: uppercase;
	}
	.priceGroups{
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		margin: 28px 0; 
		span{
			width: 52px;
			text-align:center;
			background-color: var(--body-color);
			color: var(--style-color);
			font-size: var(--primary-font-size);
			line-height: 32px;
			border-radius: 8px;
			cursor: pointer;
		}
		span.Off{
			background-color: var(--body-inactive-color);
		}		
		span.Selected{
			background-color: var(--light-color);
			color: var(--body-color);
		}
	}
	.buyWrap {
		display: inline-grid;
		grid-template-columns: 64% auto;
		gap: 45px;
		width: 100%;
		.buy{
			display: flex;
			flex-direction: column;
			gap:25px;
			button{
				width:100%;
				height: 48px;
				border: 1px var(--collection-b-radius-mid) solid;
				border-radius: var(--collection-b-radius-mid);
				position: relative;
				font-size: var(--large-font-size);
				font-family: var(--primary-font);
				font-weight: bold;
				cursor: pointer;
				.Icon{
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
					left: 24px;
					background-color: var(--style-color);
				}
			}
			.countSelection{
				display: flex;
				gap: 16px;
				> span{
					width:32px;
					height: 32px;
					border-radius: 8px;
					cursor: pointer;
					background-color: var(--body-color);
					.Icon{
						margin: 2px;
						background-color: var(--style-color);
					}
				}
				> span.light{
					background-color: var(--light-color);
				}				
				div{
					flex-grow:1;
					text-align:center;
					line-height: 32px;
					border: 0;
					background-color: var(--style-color);
					border-color:  var(--style-color);
					color: var(--block-text-color);
					font-size: var(--big-font-size);
					font-family: var(--primary-font);					
					font-weight: 500;
					outline: none;
					width: inherit;
				}
			}
		}
		.summary{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width:100%
			height: 100%;
			color: var(--block-text-color);
			font-family: var(--primary-font);
			>div{
				line-height: 0;
			}
			.label{
				width:100%;
				font-size: var(--small-font-size);
				line-height: 1.02;
				font-weight: 500;
				display: inline-block;
				margin-bottom: 3px;
			}
			.amount{
				width:100%;
				font-size: var(--h4-font-size);
				line-height: 1.05;
				font-weight: bold;
			}
		}
	}
}
.sold{
	width: 100%;
	font-family: var(--primary-font);
	font-size: var(--small-font-size);
	font-weight: 500;
	line-height: 1.92;
	color: var(--body-color);
	margin-top: 32px;
	.status{
		display: inline-block;
		width: 100%;
		height: 8px;
		position: relative;
		.current, .track{
			position: absolute;
			top:0;
			left: 0;
			height: 8px;
			border-radius: var(--collection-b-radius-mid);
		}
		.track{
			width: 100%;
			background-color: #f1ede0;							
			z-index:1;
		}
		.current{
			background-color: var(--chal-started);							
			z-index:2;
		}
	}
}
.challenges .challengesTab .collectionItem.winnersPage{
	.sold, .starts{
		display: none;
	}
	.details .description{
		max-height: 121px;
		height: 121px;	
	}
}
.challenges{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 58px 0;
	align-items: center;
	h2{
		color: var(--style-color);
		text-transform: uppercase;
		line-height: normal;
	}
	.help{
		color: var(--light-color);
		text-align: center;
		line-height: 1.92;
		font-size: var(--small-font-size);
		margin-top: 20px;
	}
	.pages{
		display: flex;
		gap: 8px;
		a{
			display: block;
			width: 24px;
			height: 24px;
			text-align:center;
			text-decoration:none;
			color: var(--style-color);
			font-family: var(--primary-font);
			line-height: 24px;
			font-weight: 600;
			font-size: var(--primary-font-size);
		}
		a.current{
			background-color: var(--style-color);
			color: var(--chal-finished);
			border-radius: 6px;
		}
	}
	.challengesTab{
		display: grid;
		margin: 52px 0 71px 0;
		grid-template-columns: repeat(3,1fr);
		gap: 75px 54px;
		.collectionItem{
			height: 564px;
			width: 388px;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 218px auto;
			position: relative;
			img {
				width: 100%;
				height:100%;
				object-fit: cover;
				border-radius: var(--collection-b-radius) var(--collection-b-radius) 0 0;
			}
			.details{
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 0 0 var(--collection-b-radius) var(--collection-b-radius);
				background-color: var(--light-color);
				padding: 20px;
				>h3{
					width: 100%;
					height: 116px;
					font-weight: bold;
					color: var(--text-color);
				}
				.description{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					line-clamp: 3;
					-webkit-line-clamp: 3;					
					height: 66px;
					max-height: 66px;
					font-family: var(--primary-font);
					font-size: var(--primary-font-size);
					overflow: hidden;
					line-height: 22px;
				}
				a{
					display: inline-block;
					text-decoration: none;
					width: 100%;
					line-height: 48px;
					border-radius: var(--collection-b-radius-mid);
					background-color: var(--body-color);
					color:var(--style-color);
					text-align:center;
					font-family: var(--primary-font);
					font-size: var(--primary-font-size);					
					font-size: var(--large-font-size);
					font-weight: bold;
					margin-top: 21px;
					position:relative;
				}
				a::before{
					content:"";
					width: 28px;
					height: 25px;
					background-image: url("./i/Logo/smallLogoStamp.svg");
					background-repeat: no-repeat;
					background-size: contain;
					display:block;
					position: absolute;
					left: 26px;
					top: 50%;
					transform: translate(0,-50%);
				}
			}
			.starts{
				position: absolute;
				top: 0;
				left:50%;
				transform: translate(-50%,-50%);
			}
		}
	}
}
.challengeDetailesWrapper{
	display: inline-flex;
	justify-content: center;
	width: 100%;
	padding: 84px 0;
	font-family: var(--primary-font);
	.challengeDetailes{
		display: grid;
		max-width: var(--data-max-width);
		grid-template-columns: 58% auto;
		grid-template-rows: auto auto;
		gap: 40px;
		.galery{
			width:100%;
			display: inline-flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 39px;
			position: relative;
			.main{
				display: inline-block;
				width:100%;
				aspect-ratio: 1.64;
				object-fit: contain;
			}
			.selector{
				display: inline-block;
				width:100%;
				aspect-ratio: 1.64;
				position: absolute;
				top: 0;
				left:0;
				.LeftShadowed, .RightShadowed{
					position: absolute;
					top: 50%;
					width: 38px;
					height: 38px;
					background-size: contain;
					background-repeat: no-repeat;
					transform: translate(0,-50%);
					cursor: pointer;
				}
				.RightShadowed{
					background-image: url(./i/Icons/RightShadowed.svg);
					right:20px;
				}
				.LeftShadowed{
					background-image: url(./i/Icons/LeftShadowed.svg);
					left:20px
				}			
			}			
			.selectionWrapper{
				display:flex;
				flex-wrap: nowrap;
				position: relative;
				overflow: hidden;
				width:100%;
				height: auto;
				.Icon{
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
					background-color: var(--style-color);
					z-index:2;
				}
				.Icon.Left{left:0;}
				.Icon.Right{right:0;}
				.Icon.Off{
					background-color: var(--body-inactive-color);
				}				
				.selection{
					transition: transform 0.5s ease-in-out;
					flex-shrink:0;
					display: inline-grid;
					grid-template-columns: repeat(4,1fr);
					gap:20px;
					width:100%;
					height: auto;
					position: relative;
					padding: 0 57px;
					overflow: hidden;
					img{
						width: 100%;
						aspect-ratio: 1.64;
						object-fit: cover;
						cursor: pointer;
					}
				}
			}
			.selectionWrapper:empty{
				display:none;
			}
		}
		.details{
			color: var(--light-color);
			line-height: 1.33;
			font-size: var(--big-font-size);
			font-weight: normal;
			h4{
				margin: 34px 0 40px 0;
			}
		}
		.actions{
			color: var(--light-color);
			display: inline-flex;
			flex-direction: column;
			gap: 0;
			height: 100%;
			align-items: baseline;			
			h1{
				color: var(--light-color);
				flex-grow:1;
				margin: 30px 0 0 0;
			}
			.sold{
				margin-top: 28px;
				color: var(--light-color);
			}
		}
		.opportunities{
			display: inline-flex;
			flex-direction: column;
			justify-content: flex-start;
			padding: 34px 0;
			gap: 60px;
			>div{
				display: inline-flex;
				gap:40px;
				.Icon{
					width: 56px;
					height: 56px;
					background-color: var(--style-color);
				}
				h4{
					font-size: var(--big-font-size);
					font-weight: 600;
				}
				div{
					font-size: var(--big-font-size);
					color: var(--light-color);
					font-weight: normal;
				}
			}
		}		
	}
}
@media screen and (max-width: 900px) {
	.getTheTicket {
		margin:19px 0 0 0;
		padding:20px;	
		.priceGroups{
			span{
				width: 35px;
			}			
		}
		.buyWrap{
			grid-template-columns: 1fr;			
			gap: 25px;
			.summary{
				flex-direction: row;
				.ticketPrice, .totalAmount{
					width: min-content;
					span{
						white-space: nowrap;
					}
				}
			}
		}
	}
	.challengeDetailesWrapper{
		padding: 24px;
		width:100%;
		.challengeDetailes{
			width:100%;
			grid-template-columns: 100%;
			grid-template-rows: unset;
			gap: 10px;
			.galery{
				gap: 14px;
				.selectionWrapper{
					.selection{
						padding:0;
					}
					.Icon{
						display: none;
					}
				}
			}
			.actions{
				margin-top:18px;
				gap: 14px;
				.starts {margin: 0 0 30px 0;}
				h1, .sold {margin:0;}
				h1{flex-grow:0;}
			}
		}
	}
	.challenges{
		padding: 49px 24px;
		h2{
			width:100%;
			text-align:center;
		}
		.challengesTab{
			grid-template-columns: repeat(2,1fr);
			gap: 60px 20px;
		}
	}	
}
@media screen and (max-width: 768px) {
	.challenges{
		padding: 49px 24px;
		h2{
			width:100%;
			font-size: 18px;
			text-align:center;
		}
		.challengesTab{
			grid-template-columns: 1fr;
			.collectionItem{
				width: 100%;
			}
		}
	}
	.challengeDetailesWrapper{
		.challengeDetailes{
			.galery{
				.selector{
					.LeftShadowed, .RightShadowed{
						width: 20px;
						height: 20px;
					}
					.RightShadowed{right:3px;}
					.LeftShadowed{left:3px}			
				}			
			}
		}
	}	
}