:root {
	--common-width: 700px;
}

.title-logo {
	max-width: 300px;
	margin: var(--spacing) auto;
	display: block;
	width: 100%;
}

.content {
	min-height: var(--content-height);
	margin: var(--spacing);
}

.card {
	&.hidden {
		display: none;
	}

	.hero-results {
		display: flex;
		flex-direction: column;
		gap: var(--spacing);

		.page--results {
			&.page--inline {
				flex: 1 1 100px;
			}
		}

		.hero-results--next-results {
			display: flex;
			gap: var(--spacing);

			@media screen and (width < 450px) {
				flex-direction: column;
			}
		}
	}
}

.page, .question {
	max-width: var(--common-width);
	padding: var(--spacing);
	border: 1px solid var(--color-primary);
	background-color: var(--color-foreground);
	color: var(--color-primary);
	border-radius: var(--spacing-double);
	font-size: 1.25rem;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	gap: var(--spacing);

	
	fieldset{
		padding: var(--spacing);
		border-radius: var(--spacing-double);	
	}

	&.page--intro {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content min-content auto min-content;
		gap: var(--spacing);

		.page__image {
			grid-row: span 4;
			width: 100%;
			height: 100%;
			border-radius: var(--spacing);
			object-fit: cover;
			object-position: center;
		}
		p{
			grid-column: 2;
		}

		.button--container{
			display: flex;
			flex-direction: column;
			grid-column: 2;
			grid-row: 4;
			justify-content: space-between;
			gap: var(--spacing);

			button{
				font-size: 1.25rem;
			}
		}
		@media screen and (max-width: 700px) {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto auto auto;

			.page__image {
				grid-row: 1;
				grid-column: 1;
				height: 300px;
			}
			p{
				grid-column: 1;
			}
			.button--container{
				display: flex;
				grid-column: 1;
				grid-row: 5;
			}

		}
	}

	& progress {
		width: 100%;
		height: 1rem;
		border-radius: var(--spacing);
		background-color: var(--color-primary);

		&::-webkit-progress-value {
			background-color: var(--color-primary);
			border-radius: 5px;
		}
	}

	&.page--results {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: var(--spacing);
		justify-items: start;
		align-items: center;
		align-content: center;

		h3 {
			grid-column: 2;
			grid-row: 1;
			text-align: center;
			align-self: self-start;
		}

		p {
			grid-column: 2;
			grid-row: 2;
			text-align: justify;
			align-self: self-start;
		}

		img {
			grid-column: 1;
			grid-row: span 2;
			border-radius: var(--spacing);
			width: 100px;
			align-self: self-start;
		}

		&.page--inline {
			display: flex;
			flex: 1 1 calc((var(--common-width) - var(--spacing) - 10px) / 3);

			h3 {}

			img {
				float: left;
				margin-right: var(--spacing);
				object-position: top;
				width: 100px;
				object-fit: cover;
			}

			p {
				text-align: justify;
				text-align-last: left;
				hyphens: auto;
			}
		}

		&.page--results-primary {
			h3 {
				font-size: 2.5rem;
			}

			img {
				width: 150px;
			}
		}
	}

	.button {
		/* margin-left: auto; */
	}

	.question__title {
		font-size: 1.5rem;
		font-weight: bold;
		text-align: center;
	}

	.question__text {
		margin-bottom: var(--spacing);
		font-size: 1.25rem;

		/* display: flex;
		gap: var(--spacing); */

		img {
			float: right;
			margin-left: var(--spacing);
			width: 33%;
			object-fit: cover;
			border-radius: var(--spacing);
		}
	}

	.question__options {
		display: flex;
		flex-direction: column;
		gap: var(--spacing);
		margin: 0;
		padding: 0;
		border-radius: 0.5rem;
		list-style-type: none;

		.option {
			display: flex;
			flex-direction: column;
			padding: var(--spacing);

			background-color: var(--color-background-offset);
			color: var(--color-primary);
			border-radius: var(--spacing);

			&:has(:checked) {
				background-color: var(--color-primary);
				color: var(--color-foreground);
				border-radius: var(--spacing);
			}

			.option__input {
				display: none;
			}

			&:hover {
				background-color: var(--color-primary);
				color: var(--color-foreground);
				border-radius: var(--spacing);
				cursor: pointer;
			}
		}
	}

	.action__container {
		display: flex;
		justify-content: space-between;

		.button.button--action {
			margin: 0;
			font-size: 1.25rem;

			&.disabled {
				opacity: 0.5;
				pointer-events: none;
			}
		}
	}
}

.card--0 {
	display: flex;
	flex-direction: column;
	gap: var(--spacing);
}

.results__container {
	max-width: var(--common-width);
}

.heroImageContainer {
	display: flex;
	flex-direction: row;
	max-width: var(--common-width);
	flex-wrap: wrap;
	gap: var(--spacing);

	&>* {
		flex: 1 1 100px;
	}
}