.btn-return {
	background: #eaeaea; 
	color: #fff;
}
.btn-return:hover {
	background-color: #ddd;
}
.quiz-section {
	max-width: var(--section-max-width-lg);
	margin: 0 auto 0;
	padding: 4rem 2rem;
}
.quiz-section h3 {
	font-size: 3.15rem;
	font-weight: 700;
	margin-bottom: 3rem;
	text-align: center;
}
.quiz-question {
	padding: 3em 0 0;
	border-top: solid 1px #ececec;
	border-bottom: solid 1px #ececec;
}
.quiz-question h4 {
	font-size: 2rem;
	margin: 0;
}
.quiz-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3rem 0;
	margin-bottom: 6rem;
}
.question-options {
	display: flex;
	flex-wrap: wrap;
	margin: 3rem 0 0;
}
.question-options article {
	overflow: hidden;
	position: relative;
	height: 0;
	width: calc(33% - 2rem);
	padding: 0.33rem;
	padding-bottom: calc(33% - 2rem);
	margin: 1rem;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
	transition: all .4s ease;
}
.question-options article:hover {
	box-shadow: inset 0 0 0px 2px var(--color-green-dark);
	background-color: #dedede;
	transform: scale(1.05);
}
.question-options article.checked {
	background-color: rgba(0,0,0,.1);
}
.question-options article.checked::before {
	font-family: "Font Awesome 5 Free";
	content: "\f058";
	color: #8bff28;
	display: inline-block;
	border-radius: 2rem;
	font-size: 3rem;
	line-height: 1;
	position: absolute;
	right: 5px;
	top: 5px;
}
.question-options.solid article.checked::before {
	font-weight: 900;
	background-color: #000000;
	text-shadow: -2px -2px 5px rgb(0 0 0 / 30%), 2px 2px 5px rgb(0 0 0 / 40%);
}
.question-options.transparent article.checked::before {
	text-shadow: 2px 2px 5px #000;
	font-weight: 500;
	background-color: transparent;
}

.question-options.icon article {
	background-color: #fff;
	box-shadow: inset 0px 0px 1px 1px #d2d2d2, inset 0px 0px 5px 0px rgb(0 0 0 / 30%);
	transition: box-shadow .01s ease, transform .4s ease-in-out;
}
.question-options.icon article img {
	width: 60%;
	padding-top: 10%;
	margin-bottom: 1rem;
}
.question-options.icon article h5 {
	color: var(--color-green-dark);
	font-weight: 700;
	margin: 0;
}

.question-options.icon article:hover,
.question-options.icon article.checked {
	box-shadow:  inset 0px 0px 2px 2px #7ce224, 
		inset 0px 0px 100px 100px rgb(120 255 137 / 30%), 
		0px 0px 5px 0px rgb(0 0 0 / 25%);
}

.question-options.image article {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 1px 1px #424242, inset 0px 0px 5px 0px rgb(255 255 255 / 30%);
}
.question-options.image article:hover {
	box-shadow: inset 0px 0px 1px 1px #7ce224, inset 0px 0px 5px 0px rgb(255 255 255 / 30%);
}
.question-options.image article img {
	display: none;
}
.question-options.image article h5 {
	background-color: rgba(0,0,0,.6);
	color: #fff;
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	padding: 0.8rem;
}
.question-options.image article.checked {
	box-shadow:  inset 0px 0px 2px 2px #7ce224, 
		inset 0px 0px 100px 100px rgb(120 255 137 / 30%), 
		0px 0px 5px 0px rgb(0 0 0 / 25%);
}
.question-options.image article.checked h5 {
	background-color: rgb(100 216 0 / 60%);
}

.question-options input[type=radio],
.question-options input[type=checkbox] {
  display: none;
}


@media (max-width: 576px) {
	.question-options article.checked::before {
		font-size: 2.5rem;
		top: 0.75rem;
		right: 0.75rem
	}
	.quiz-buttons {
		flex-direction: column;
	}
	.quiz-buttons .btn-action {
		width: 100%;
	}
	.question-options article {
		width: calc(50% - 0.66rem);
    padding: 0.33rem;
    padding-bottom: calc(50% - 0.66rem);
    margin: 0.33rem;
	}
}