:root {
	--article-width: 65%;
	

	--main-image-height: 30rem;
	--main-logo-height: 10rem;
	--season-date-skew: 25deg;
}



.mainImage {
	width: 100%;
	height: var(--main-image-height);
	grid-row: 1;
	grid-column: 1 / span 3;
}

article {
	display: grid;
	grid-template-columns: 1fr var(--article-width) 1fr;
	
}

.decorative-panel {
	height: 10rem;
	grid-column: 1/ span 3;
}



section {
	grid-column: 2;
	padding: 1rem;
}

section > h1 {
	text-transform: uppercase;
}

section > .details {
	padding-left: 1rem;
}

.section-full-bleed {
	background-color: var(--primary-color);
	box-shadow: 0 0 0 100vmax var(--primary-color);
	clip-path: inset(0 -100vmax);
}


	



.s-offers ul {
	padding-left: 2rem;
}

.s-offers hr {
	border-style: solid;
	border-color: var(--font-color);
}

.s-offers .imageContainer {
	overflow-x: scroll;
	scroll-behavior: smooth;
	display: flex;
	gap: 2rem;
	align-items: center;
	position: relative;
	left: -10rem;
	width: 85vw;
	height: 18rem;
	margin-top: 1rem;
	margin-bottom: 3rem;
}

.s-offers .imageContainer > img {
	height: 100%;
	width: 100%;
}

.s-offers .imageContainer > a {
	padding: 1rem;
	color: var(--highlighted-font-color);
	background-color: var(--accent-color);
	border: .1rem solid var(--accent-color);
	border-radius: 5rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	transition-property: background-color, color;
	transition-duration: 100ms;
}

.s-offers .imageContainer > a:hover {
	background-color: transparent;
	color: var(--font-color);
}

.s-offers .imageContainer::-webkit-scrollbar {
	height: .75rem;
}

.s-offers .imageContainer::-webkit-scrollbar-thumb {
	border-radius: .2rem;
	background-color: var(--tetriary-color);
}


.s-offers .imageContainer::-webkit-scrollbar-thumb:hover {
	background-color: var(--secondary-color);
}


	



.s-seasons > .season-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.s-seasons > .season-container > .season {
	text-align: center;

	display: flex;
	flex-direction: column;
	align-items: center;
}



.s-seasons > .season-container .date-wrapper {
	transform: skewX(var(--season-date-skew)) translateX(1rem);
	width: 100%;
	height: 100%;
	background-color: var(--accent-color);
	box-shadow: 1px 1px 25px 1px rgba(0, 0, 0, 0.58);

	display: flex;
	justify-content: center;
	align-items: center;
}

.s-seasons > .season-container p {
	
	
	transform: skewX(calc(var(--season-date-skew) * -1)) translateX(0rem);
	color: var(--highlighted-font-color);
	margin: 1rem;	
}



.s-prices .finalPrices {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1rem;

	text-align: center;
}

.s-prices .finalPrices > .season {
	display: grid;
	grid-template-rows: auto auto auto 6rem;

	background-color: var(--accent-color-diffused);
}

.s-prices .finalPrices > .season p {
	padding-left: .5rem;
	padding-right: .5rem;
}

.s-prices .finalPrices > .season a {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1rem;

	background-color: var(--accent-color);
	color: var(--highlighted-font-color);
}

.s-prices .finalPrices > .high-season {
	border-bottom-left-radius: 2rem;
}

.s-prices .finalPrices > .high-season a {
	grid-row: 4;
	border-bottom-left-radius: inherit;
}

.s-prices .finalPrices > .pre-post-season {
	grid-template-columns: 1fr 1fr;
	
	border-bottom-right-radius: 2rem;
}

.s-prices .finalPrices > .pre-post-season h2,
.s-prices .finalPrices > .pre-post-season .criterion-display {
	grid-column: 1 / span 2;
}

.s-prices .finalPrices > .pre-post-season .weekend-name {grid-column: 1; grid-row: 3;}
.s-prices .finalPrices > .pre-post-season .weekend-price {grid-column: 1; grid-row: 4;}
.s-prices .finalPrices > .pre-post-season .weekdays-name {grid-column: 2; grid-row: 3;}
.s-prices .finalPrices > .pre-post-season .weekdays-price {grid-column: 2; grid-row: 4; border-bottom-right-radius: inherit;}



.s-events .event-container {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	
	grid-gap: 1rem;
	grid-auto-flow: dense;	
}

.s-events .event-container .ticket {
	--ticket-color: var(--tetriary-color);
	--ticket-edge-radius: 25px;
	--ticket-rip-radius: 5px;
	background:
		-webkit-radial-gradient(0 100%, circle, var(--background-color) calc(var(--ticket-edge-radius) - 1px), transparent var(--ticket-edge-radius)),
		-webkit-radial-gradient(100% 100%, circle, var(--background-color) calc(var(--ticket-edge-radius) - 1px), transparent var(--ticket-edge-radius)),
		-webkit-radial-gradient(100% 0, circle, var(--background-color) calc(var(--ticket-edge-radius) - 1px), transparent var(--ticket-edge-radius)),
		-webkit-radial-gradient(0 0, circle, var(--background-color) calc(var(--ticket-edge-radius) - 1px), transparent var(--ticket-edge-radius)),

		-webkit-radial-gradient(0 20%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 30%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 40%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 50%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 60%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 70%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(0 80%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		
		-webkit-radial-gradient(100% 20%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 30%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 40%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 50%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 60%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 70%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius)),
		-webkit-radial-gradient(100% 80%, circle, var(--background-color) calc(var(--ticket-rip-radius) - 1px), transparent var(--ticket-rip-radius));
	background-color: var(--ticket-color);
	
	background-repeat: no-repeat;

	display: grid;
	grid-template-columns: auto 1fr;
}

.s-events .event-container .ticket > .ticket-year {
	writing-mode: vertical-lr;
	text-orientation: sideways;

	padding-right: 1rem;
	border-right: 2px dashed black;
}



.s-contact {
	text-align: center;
}