.quiz {
	overflow-x: hidden;
	
	> .container {
		--section-offset: var(--clamp-40-20);
		--logo-overlap: var(--clamp-40-20);

		padding-block: var(--section-offset);
	}

	> .container > .content {
		position: relative;
		isolation: isolate;

		.masthead {
			display: flex;
			gap: var(--clamp-30-10);
			align-items: center;
			justify-content: space-between;
			padding-bottom: var(--logo-overlap);

			.title {
				margin: 0;
				max-width: max(49%, 400px);
				font-size: var(--clamp-48-28);
				font-weight: 800;
				line-height: 1.3;
				color: var(--black);

				span {
					font-size: var(--clamp-32-26);
					font-weight: 500;
				}
			}

			.logo {
				--logo-size: clamp(130px, calc(65.0909px + 19.0909vw), 340px);

				position: relative;
				z-index: 0;
				flex: 0 0 auto;
				width: var(--logo-size);
				height: var(--logo-size);
				margin-top: auto;
				transform: translateY(var(--logo-overlap)) rotate(22deg);
			}
		}

		.body {
			position: relative;
			z-index: 1;
			margin-top: calc(-1 * var(--logo-overlap));
			width: 100%;
			min-height: 400px;
			border-radius: var(--clamp-30-10);
			border: 2px solid var(--blue);
			background-color: var(--white);
			overflow: hidden;
		}
	}
}

@media screen and (max-width: 768px) {
	.quiz {
		& > .container > .content {
			.body {
				min-height: unset;
				margin-top: unset;
				border: 0;
				padding: 50px 20px 30px;
			}
		}

}