.frame:has(.quiz-overview) { aspect-ratio: auto; background: #f7f5ed; }
.frame:has(.quiz-overview)::before { display: none; }
.frame:has(.quiz-overview) #content { height: auto; }
.frame:fullscreen:has(.quiz-overview), #expanded-view .frame:has(.quiz-overview) { overflow-y: auto; }
.quiz-overview { font-family: PanoManrope, "Segoe UI", sans-serif; padding: 36px clamp(16px, 2.4cqw, 44px); color: #17382c; }
.quiz-overview header { padding-right: 45px; }
.quiz-eyebrow { margin: 0 0 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #58695c; }
.quiz-overview h1 { padding: 0; font: 700 clamp(26px, 3.5cqw, 56px)/1.1 PanoManrope, sans-serif; letter-spacing: -.045em; }
.quiz-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 25px; }
.quiz-overview-grid article { display: flex; flex-direction: column; background: #faf9f3; border: 1px solid #dcdad0; border-radius: 14px; overflow: hidden; }
.quiz-overview-grid article > img { width: 100%; height: auto; aspect-ratio: 2.48; object-fit: cover; }
.quiz-card-copy { display: flex; flex: 1; flex-direction: column; padding: clamp(14px,1.5cqw,25px); }
.quiz-card-copy h2 { margin: 0; font-size: clamp(17px,1.55cqw,26px); line-height: 1.2; }
.quiz-card-copy p { margin: 12px 0 16px; font-size: clamp(14px,1.18cqw,19px); line-height: 1.5; color: #485448; }
.quiz-launch { display: block; margin-top: auto; border: 0; border-radius: 10px; padding: 13px 10px; background: var(--forest); color: white; font: inherit; text-align: center; text-decoration: none; }
.quiz-launch:hover { background: #314f3a; }
@container (max-width: 720px) { .quiz-overview-grid { grid-template-columns: 1fr; } }