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

	--main-image-height: 30rem;
	--main-logo-height: 10rem;
}

.priceSpan {
	white-space: nowrap;
	hyphens: none;
}



.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-contact {
	text-align: center;
}