/*
	* Competition specific layout styles *

*/

:root {
	--space: 8px;
}

.competition {
	background-color: #fff;
}


.card-layout {
	display: grid;
	gap: 0;
	height: 100%;
	grid-template-rows: 54vw auto;
}

.card-layout .content {
	padding: 24px 0;
}

@media screen and (min-width: 62em) { /* 992px */
	.card-layout {
		grid-template-rows: 46vw auto;	}

}

@media screen and (min-width: 80em) { /* 1280px */
	.card-layout {
		grid-template-rows: unset;
		grid-template-columns: 1fr 1.75fr;
		align-items: center;
	}
}

@media screen and (min-width: 105em) { /* 1680px */
	.card-layout {
		grid-template-rows: 100vh auto;
		grid-template-columns: auto auto;
		justify-content: flex-start;
		justify-content: start;
	}

}

.card-layout__banner {
	height: 100%;
}

.card-layout__banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


@media screen and (min-width: 80em) { /* 1280px */
	.card-layout__banner-img {
		/* width: auto; */
	}

}



.card-layout__content {
	padding-left: 4vw;
	padding-right: 4vw;
}

@media screen and (min-width: 48em) { /* 768px */

	.card-layout__content {
		padding-left: calc(var(--space) * 6);
		padding-right: calc(var(--space) * 6);
	}
}

@media screen and (min-width: 80em) { /* 1280px */
	.card-layout__content {
		max-width: 100ch;
	}
}


.card-layout-header {
	text-align: center;
}

@media screen and (min-width: 80em) { /* 1280px */

	.card-layout-header {
		text-align: left;
	}
}


.card-layout-title {
	margin-top: 0;
}

@media screen and (min-width: 48em) { /* 768px */
	.card-layout-title {
		font-size: 5rem;
		line-height: 1.12;
	}

}

/*
	Progress bar Styles

	This structure is a bit weird because I was trying to use
	the <progress> html tag initially but it wasn't going to work
*/

.progress-bar {
	position: relative;
	max-width: 80%;
	height: 32px;
	display: grid;
	align-items: center;
	margin: 24px auto 32px;
}

@media screen and (min-width: 80em) { /* 1280px */
	.progress-bar {
		width: 260px;
		margin-left: 8px;
	}

}


.progress-bar:before,
.progress-bar:after,
.progress-bar__step:after {
	position: absolute;
	width: 32px;
	height: 32px;
	background-color: #ccc;
	display: grid;
	justify-content: center;
	align-items: center;
	top: 0;
	border-radius: 32px;
	z-index: 3;
}

.progress-bar:before {
	content: '1';
	left: -16px;
}

.progress-bar:after {
	content: '3';
	right: -16px;
}

.progress-bar__bar {
	background-color: rgb(235, 235, 235);

	width: 100%;
	margin-top: 12px;
	margin-bottom: 12px;
	height: 8px;
}

.progress-bar__bar::before {
	content: '';
	position: absolute;
	background-color: #5e345d;
	top: 12px;
	bottom: 12px;
	left: 0;
}


.progress-bar__step:after {
	content: '2';
	left: 50%;
	transform: translateX(-16px);
}

.progress-bar--step-1:after,
.progress-bar--step-1 .progress-bar__step:after {
	color: rgba(0,0,0,.4);
}

.progress-bar--step-2:after {
	color: rgba(0,0,0,.4);
}

.progress-bar--step-2 .progress-bar__bar::before {
	width: 50%;
}

.progress-bar--step-3 .progress-bar__bar::before {
	width: 100%;
}